点击右上角的红色按钮关注“网络秀”，让你真正成为秀
首先，说到CSS3动画，必须讲述transform、translate、transition、animation这4个属性。 transform主要定义元件的运动，如旋转、倾斜、位移等，translate是transform中的属性，用于2d的后两者主要描述动作，包括动画时间、速度曲线、次数等。
如何快速着手基础CSS3动画
我给你看几个简单的例子。 简单地开始吧。
快速开始第一个动画
如何快速着手基础CSS3动画
这里是在hover事件时改变宽度和背景的颜色，用transition描述动画。 因为只记述了width，所以背景的颜色、鼠标的手指很快就会变色，没有渐变的过程。
这里为什么要用transition而不是animation？ 那么，谈谈他们的直接区别吧。
transition需要触发事件，而animation可以通过显式更改元素css的属性值来获得动画效果，而无需触发事件。 transition属性是一个简单的动画属性，非常简单和容易使用。 这是animation的简化版，可以说是为了制作普通简单的web特殊效果。
现在明白了吧。 因为我们使用的hover事件，所以使用transition。
让我们看第二个例子
快速开始第二个动画
如何快速着手基础CSS3动画
在这里，动画是从加载开始执行的，所以使用animation改变宽度和背景颜色，在时间1秒内，而且循环执行无限次。 @keyframes规则是制作动画。 -WebKit–(chrome/safari )、- ms– ( ie )或- moz– ( Firefox )用于与不同的浏览器兼容。
快速开始第三个动画
如何快速着手基础CSS3动画
transform:rotate将p元素2D旋转20。 当然，transform:rotateY，可以设置y轴的3D旋转。
如何快速着手基础CSS3动画
transform :也可以设置translate进行二维、三维位移；
如何快速着手基础CSS3动画
变换：缩放、二维、三维缩放；
如何快速着手基础CSS3动画
变换：进行草图、二维倾斜等。
如何快速着手基础CSS3动画
总结好的动画效果，第一要素是好的创意、创造力、好的成品。第二要素是解题思路好，设计好了之后，制作就要想办法实现效果，剥开茧线，一步一步走下去； 第三要素：无惧之心，勇于尝试、实践、动手，灵感总会来与你写作的过程。
如果有上面的小例子，我相信伙伴们也能自己写简单的CSS3视频。 如果有疑问的话，请写评论，大家一起学习讨论。
