web前端优秀程序员系列之css3动画，css3属性中关于制作动画的三个属性：transform，transition，animationkeyframes@keyframesmymove{from{initialstateproperty}to{Endstateattribute}}or@keyframesmymove{0%{initialstateattribute}100%{endstateattribute}}（中间可以加keyframes）animation和transition的区别是一样的：都是随时间改变元素的属性值。不同点：transition需要触发一个事件（hover事件或者click事件等）来随着时间改变它的css属性；animation也可以在不触发任何事件属性值的情况下随时间显式改变元素css，从而达到动画效果，css3的动画需要明确的animation属性值。animationAnimation复合属性。检索或设置应用于对象的动画效果。1.animation-name检索或设置应用于对象的动画名称说明：必须与规则@keyframes一起使用，例如：@keyframesmymove{}animation-name：mymove2.animation-duration检索或设置对象动画的持续时间说明：animation-duration:3s;用于完成动画的时间为3s3.animation-timing-function检索或设置对象动画的过渡类型说明：linear：线性过渡。相当于贝塞尔曲线(0.0,0.0,1.0,1.0)ease：平滑过渡。相当于贝塞尔曲线(0.25,0.1,0.25,1.0)ease-in：由慢到快。相当于贝塞尔曲线(0.42,0,1.0,1.0)ease-out：由快到慢。相当于贝塞尔曲线(0,0,0.58,1.0)ease-in-out：由慢到快再到慢。相当于贝塞尔曲线(0.42,0,0.58,1.0)4.animation-delay获取或设置对象动画延迟的时间描述：animation-delay:0.5s;动画开始前的延迟时间为0.5s)5.animation-iteration-count获取或设置对象动画的循环次数说明：animation-iteration-count:infinite|数字;infinite：无限循环number：循环次数6.animation-direction获取或设置对象动画在循环中是否反向运动说明：normal：正常方向reverse：反方向运行alternate：动画正常运行并且然后反向，继续交替运行alternate-reverse：动画先反向运行，再正向运行，继续交替运行7.animation-play-state检索或设置状态描述对象动画：animation-play-state:running|暂停；运行：运动暂停：暂停动画播放状态：暂停；鼠标经过时动画停止，鼠标移开时动画继续执行
