jansesun原创，转载请注明出处

CSS3的animation属性为前端实现动画提供广阔的平台。不管是渐变动画还是逐帧动画都可以信手拈来。各种api的组合应用，可以打造炫酷的前端动画。

1.渐变动画

CSS3的animation属性允许同时设置多个关键帧动画，结合贝塞尔曲线时间函数的灵活应用即可随心所欲的实现DOM元素按任意平面曲线运动。

接下来我会给出一个DOM按照平抛运动轨迹运行的demo

在实现demo前，我们先从数学原理分析

平抛运动轨迹的参数方程为x = t, y = t^2，而x = t的贝塞尔曲线为linear, y=t^2的贝塞尔曲线为cubic-bezier(0, 0, .33, 0)

有了参数方程对应的贝塞尔曲线，剩下的就是前端工程师擅长的css定义了。

.rose.active {
	animation: moveX linear 1s infinite, moveY cubic-bezier(0, 0, .33, 0) 1s infinite;
	will-change: top, left;
}
@keyframes moveX {
	from {
		left: 0;
	}
	to {
		left: 100px;
	}
}
@keyframes moveY {
	from {
		top: 0;
	}
	to {
		top: 100px;
	}
}

触发动画

2.逐帧动画

CSS3的animation可以设置阶跃时间函数

结合css sprite技术，利用阶跃时间函数离散的改变容器的背景位置，即可轻松的实现逐帧动画。

tips: 实现逐帧动画时，只需要设定起始和结束位置，然后设置帧数-1步长即可。

.movie {
	width: 288px;
	height: 168px;
	background-image: url(../images/movie.png);
	background-repeat: no-repeat;
}
.movie.active {
	animation: movie 1s steps(10, start) 3;
}
@keyframes movie {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 0 -1680px;
	}
}

和gif图相比而言，逐帧动画可以灵活的实现播放帧数，播放次数，播放频率的控制，可以做到收放自如。