CSS3 动画系列1-动画基础

日期：2013-11-22  来源：攀枝花惠康网络公司

10年5月份写过近似的文章，那时辰CSS3 动画根基上只有webkit内核的浏览器，现在CSS3已经年夜量的被应用到各类项目中，而且逐渐成为前端开发工程师的必备手艺。虽然在项目中也经常用CSS3滥暌古化一些体验，可是总觉的自己把握的不够，所以比来温故知新，总结一下。接待巨匠拍砖谈判。

归纳总结了一下，我们口中说的CSS3 动画搜罗两种类型：

1. Transition-过渡
2. Animation-动画

他们都使我们的网页“动”起来了，两者功能近似，不外两者存在着一下细微的分歧： Transition（过渡）是经由过程界耸ё侏素年夜 起点的状况 和 竣事点的状况 ，在必然的时刻区间内实现元素滑腻地过渡或转变 的一种补间动画机制。 而Animation（动画）不仅可以界耸ё侏素年夜 起点的状况 和 竣事点的状况，而且他可以界耸ё侏素 在肆意两个点之间的关头帧（Keyframes）的状况，在指定的时刻内实现元素滑腻地过渡或转变 的一种补间动画机制。 使用transition建造一个简单的transition效不美观时，元素搜罗了起点状况的属性和竣事点状况的属性，一个起头执步履画时刻（transition-delay）和一个延续动作时刻（transition-duration）以及动作的变换速度（transition-timing-function），这样就可以进行一个简单的动画了。如不美观我们要节制的更细一些，好比说我要第一个时刻段执行什么动作，第二个时刻段执行什么动作，这样我们用Transition就很难实现了，此时我们需要关头帧（Keyframes）来加倍切确的节制，在指定的时刻内在关头帧（Keyframes）之间，实现元素滑腻地过渡或转变 。 画了两个示意图： Transition（过渡）示意图，1秒时刻内只改某元素的颜色：

 

接下来是Animation（动画）示意图，前1秒时刻内使元素变年夜，后2秒改变元素的颜色，而且使元素变为原本的巨细： 其实Transition（过渡）下的 起点 和 竣事点也可以理解为关头帧，只不外这两点间不能界说关头帧，而Animation可以起点 和 竣事点之间界说肆意的关头帧。至于动画是在指定的时刻内，元素在两个关头帧之间 实现滑腻地过渡或转变 的一种补间动画机制。当如动画的前提是元素在两个关头帧下状况存在差异，即使是很小的差异，当然我们的肉眼可能看不出来。 若是你以前做过flash动画，理解Transition（过渡）和Animation（动画）应该很是简单。如不美观我写的你理解不了，那么你可以看看这个flash动作补间动画的视频教程。