CSS3中的动画是什么？动画是将元素从一种样式逐渐更改为另一种样式的效果。您可以根据需要更改任意数量的样式。现在，我很少写介绍CSS的文章了，因为感觉网站开发的关键还是在服务器端。但是，除了CSS动画，它们实在是太有用了。--（阮一峰CSS动画）在CSS3引入Transition概念之前，CSS是没有时间轴的。换句话说，所有状态更改都是立即完成的。1、transition的完整写法如下。transition:propertydurationtiming-functiondelay;EffectivestylePeriodTimefunction何时启动例如：img{transition:height1sease1s;}transition属性是一种简写形式，可以独立定义为四个动画属性。img{过渡持续时间：1s;转换延迟：1s；过渡属性：高度；transition-timing-function:ease;}使用注意：Transition需要知道开始状态和结束状态的具体值，才能计算中间状态。transition的优点是易于使用，但它有几个主要的限制。(1)Transition需要事件触发，不能在网页加载时自动发生。(2)Transition是一次性的，除非被重复触发，否则不能重复。(3)transition只能定义起始状态和结束状态，不能定义中间状态，也就是说只有两种状态。CSSAnimation就是为了解决这些问题而提出的。不同的是，transition是在变化的过程中加入动画，所以必须要有一个事件来触发元素某个样式的值的变化。动画的强大之处在于你可以在任何阶段任何时间定义动画。2、动画（transition的升级版）完整的写法如下。animation:namedurationfunction延迟计数方向；keyframenameperiodtimefunctionwhentostartplayingtimesplaybackdirection如：动画：myfirst5slinear2sinfinitealternate;animation属性是一种简写形式，可以分别定义为六个动画属性：*animation-name*animation-duration*animation-timing-function*animation-delay*animation-iteration-count*animation-direction指定是否动画应依次反向播放，默认返回初始状态。另外还有两个属性：*animation-play-state规定动画终止或者运行，默认运行*animation-fill-mode指定动画结束后的状态，默认回到初始状态。每个属性的可选值：函数：linear|ease(slowinandslowout)|...|cubic-bezierdirection:normal|alternate(playinreverse)|reverse..play-state:running|pausedfill-mode:none|forwards(keepfinalstate)|backwards|both@keyframes规则用于创建动画.在@keyframes中指定CSS样式会创建一个从当前样式逐渐变为新样式的动画。--(W3CCSS动画)@keyframesmyfirst{0%{background:red;}相当于from25%{background:yellow;}50%{background:blue;}100%{background:green;}相当于}time功能：管理动画在单位帧内播放的速度曲线，使用三次Bell函数的数学函数，预设值（lineareaseease-in...）决定动画的显示效果。Timefunction-non-linear：可以实现动画的阶跃变化，而不是线性过渡。3、CSS中的transform、transition、animation，从它们各自的名字就可以大致理解。transform用于平移、旋转、缩放和倾斜元素。transition为元素样式的（数字）值变化提供过渡动画。animation增强过渡动画能力，可以用来替代很多网页动画图片、Flash动画、javascript。使用transform实现几何变换，可以结合动画实现很酷的效果：transform2D变换：平面二维空间中的几何变换变换效果单元translate(x,y)水平和垂直平移pixelpxrotate(deg)clockwiserotationdegreedegscale(x,y)水平垂直缩放值skew(x,y)tiltdegreedegtransform3Dconversion:geometrictransformconversioneffectinthree-dimensional三维空间的简称translateX/Y/Z同上translate3d(x,y,z)rotateX/Y/Z三维绕轴旋转rotate3d(x,y,z,angle)scaleX/Y/Z同上scale3d(x,y,z)perspective(n)无实战透视效果动画案例一：实现图片左右平移并绕Z轴翻转360度
