点选右上角黄色按键高度关注“web秀”，让你或者说秀出来

序言

讲起CSS3动画电影，就要说说 transform，translate，transition，animation这4个特性，transform主要就定义原素的姿势，比如说转动、下压、偏转等，translate是transform里头的特性，用作2D/3D偏转。后2个主要就对姿势展开叙述，动画电影天数、速率抛物线、单次等。

上面布季谢是许多单纯的实例，让他们加速的进阶上手:

加速已经开始第二个动画电影

<style> .div1{ width: 100px; background: red; /** 动画电影叙述：长度发生改变动画电影 白眉林 1s*/ transition: width 1s; } .div1:hover{ width: 200px; background: blue; } </style> <div class=”div1″>动画电影</div>

这儿hover该事件时发生改变长度和大背景色调，用transition来叙述动画电影，虽然他们只对width展开了叙述，因此深蓝色，滑鼠指上来，会立刻变黑，并不能有蓝紫色的操作过程。

这里为何用transition而不必animation？那要是说说她们间接的差别了。

transition需要触发一个该事件， 而animation在不需要触发任何该事件的情况下也可以显式的随着天数变化来改变原素css的特性值，从而达到一种动画电影的效果。transition特性是一个单纯的动画电影特性，非常单纯非常容易用。可以说它是animation的简化版本，是给普通做单纯网页特效用的。

现在知道了吧，因为我们用的hover该事件，因此要用transition。

上面请看第二个例子

加速已经开始第二个动画电影

<style> .div1{ width: 100px; background: red; /** 动画电影叙述：长度色调发生改变动画电影 白眉林 1s infinite（无限次）*/ animation: second 1s infinite; color: #fff; } @keyframes second{ /**已经开始（可以用百分比表示）*/ from { width: 100px; background: red; } /**结束（可以用百分比表示）*/ to { width: 200px; background: blue; } /** or */ /**已经开始*/ 0% { width: 100px; background: red; } /**中间可以加多个区间*/ /**结束*/ 100% { width: 200px; background: blue; } } </style> <div class=”div1″>动画电影</div>

这儿动画电影从加载就已经开始执行，因此用了animation，发生改变长度和深蓝色，白眉林1s，并且无限次循环执行。@keyframes规则是创建动画电影。 -webkit-（chrome/safari）, -ms-(ie) 或 -moz-(firefox) 用作兼容不同浏览器。

加速已经开始第三个动画电影

<style> .div1{ width: 100px; background: red; animation: second 1s infinite; color: #fff; } @keyframes second{ 100% { transform: rotate(20deg); } } </style> <div class=”div1″>动画电影</div>

transform：rotate使其div原素2D转动20°.当然你可以设置transform：rotateY, Y 轴的 3D 转动。

你还可以设置transform: translate，展开2D，3D偏转；

transform: scale，展开2D，3D缩放；

transform: skew，展开2D下压等等。

总结

好的动画电影效果，第一要素是：好的想法，有创意，才有好的成品；第二要素是：有好的实现解题思路，当有设计后，制作就需要想办法实现效果，剥茧抽丝，一步一步来；第三要素：不畏惧的心，勇敢尝试，多实践，多动手，灵感往往来与你写的操作过程中。

有了上面的小实例，相信小伙伴们也能自己写写单纯的CSS3动画电影了，如果有疑问，可以评论留言，他们一起学习探讨。