CSS3动画实现光点移动效果

CSS3动画实现光点移动效果

纯CSS实现光点从左到右，渐入渐出的效果

首先定义将光点图片放在容器盒子里，固定容器的位置，这里以left: 120px; top:194px;进行了绝对定位

<div class="pastedMoving">
	<img src="@img/screen/pasted.png" style="width: 150%" />
</div>

style样式里定义动画播放，animation-delay为第一次3秒提前播放，这是为了对应在keyframes 中设置的总时间的前50%时间内不进行播放，这里设置的总时间animation为6s，3秒播放完动画后，隔3秒进行下一次播放。
-webkit-animation和animation，以及keyframes和-webkit-keyframes是针对的不同浏览器做的适配

.pastedMoving{
    -webkit-animation: 6s move infinite linear normal;
    animation: 6s move infinite linear normal;
    animation-delay: -3s;
    float: left;
    position: absolute;
    left: 120px;
    top:194px;
    opacity:0;
}
@keyframes move {
    /*从6s整体时间的50%开始播放动画，即前3s为两次动画时间间隔*/
    50% {
        left: 10%;
        opacity:0;
    }
    75% {
        left: 50%;
        opacity:1;
    }
    100% {
        left: 100%;
        opacity:0;
    }
}
@-webkit-keyframes move {
    50% {
        left: 10%;
        opacity:0;
    }
    75% {
        left: 50%;
        opacity:1;
    }
    100% {
        left: 100%;
        opacity:0;
    }
}