css3小记----动画

今天写了一个挺好玩的简单动画，是一个马儿奔跑的效果，大家看了以后如果想要素材可以在下面留下你的邮箱，我会打包发给你。下面给大家看看效果

（忽略水印哈）效果是不是挺炫酷的，下面告诉大家怎么制作这个跑马

<div class="wrapper">
			<div class="show">
				
			</div>
		</div>

html的代码就上面这些，外面是一个显示的我们图片的区域，里面是放置我们这个跑马一系列图片的盒子，因为比较简单就不做太多讲解，下面看css代码

@keyframes move{
			0%{
				left: 0;
			}
		
			100%{
				left: -2400px;
			}
		}
		@keyframes wrapMove{
			0%{
				right: 0;
			}
			100%{
				right: 1500px;
			}
		}
		.wrapper{
			position: absolute;
			width: 200px;
			height: 100px;
			top: 500px;
			
			overflow: hidden;
			animation: wrapMove 12s;
		}
		.show{
			position: absolute;
			width: 2400px;
			height: 100px;
			background-image: url(img/horse.png);
			animation: move 1s steps(12, end) both infinite;
		}

很明显，这里用到了css3的知识，不会css3的小伙伴要看看css3的动画效果就可以看懂上面代码了。有的同学可能不知道steps（12，end）是什么意思，这是anmation的一个属性，把这个动画拆分成12小步来执行，这样我们就不用手动写每一帧动画了，后面的both属性可以不加，这个没有影响。我们给wrapper这个盒子设置一个overflow：hidden，这样就隐藏舞台外面的图片了，把这个跑马的一系列图设置成背景图片的样式。每一个个小马图片是200px 一共12个，所以要设置2400px的大小，像素的正负千万别错了，起始点是left：0，向左移动图片，所以要变成-2400px。把盒子设置成绝对定位，否则跑不动的。在马儿跑动的过程中，如果你想让马儿匀速跑动，可以加一个贝塞尔曲线（0,0,1,1），这样就不会有默认的先慢后快再慢的速度了。
实现的方法就这么多了，因为比较简单，也没什么好说的，用到的是简单的css3的动画，如果哪位小伙伴没看懂可以在下面留言询问。