CSS3动画属性

浏览器前缀

css3很多属性还没有确定下来，标准规范还没有发布，许多浏览器支持的程度也不同，而且每个浏览器厂商同一个样式支持的写法也不同，所以要加前缀来达到各个浏览器兼容，将来统一了规范就不用写前缀了。

-ms-	    IE浏览器专属的CSS属性需添加-ms-前缀
-moz-	   	所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加
-o-	        Opera浏览器专属的CSS属性需添加-o-前缀
-webkit-    所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加

关键帧

过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

@keyframes mymove{
 from{初始状态属性}
 to{结束状态属性}
}
或
@keyframes mymove{
 0%{初始状态属性}
50%{中间状态属性}（中间再可以添加关键帧）
100%{结束状态属性}
}

animation与transition的比较

• 相同点：都是随着时间改变元素的属性值。
• 不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；是初始效果——最终的效果之间的变化。
  而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值。是初始效果——动画帧——动画帧——最终结果

animation

• animation-name（必有)

  • 检索或设置对象所应用的动画名称
  • 必须与规则@keyframes配合使用，

• animation-duration （必有)

  • 检索或设置对象动画的持续时间
  • 【例】：animation-duration:3s; /动画完成使用的时间为3s/

• 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)
    • step-start:马上跳到动画每一结束帧的状态

• animation-delay

  • 检索或设置对象动画延迟的时间
  • 【例】：animation-delay:0.5s; /* 动画开始前延迟的时间为0.5s。负值表示提前执行。*/

• animation-iteration-count

  • 检索或设置对象动画的循环次数
  • 属性值
    • animation-iteration-count: infinite | number;
    • infinite：无限循环
    • number: 循环的次数

• animation-direction

  • 检索或设置对象动画在循环中是否反向运动
  • 属性值
    • normal：正常方向
    • reverse：反方向运行
    • alternate：动画先正常运行再反方向运行，并持续交替运行
    • alternate-reverse：动画先反运行再正方向运行，并持续交替运行

• animation-play-state

  • 检索或设置对象动画的状态
  • 属性值
    • animation-play-state:running | paused;
    • running:运动
    • paused: 暂停
    • animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

• animation-fill-mode

  • 规定动画播放之前或之后，其动画效果是否可见

  • 属性值：
    ​none(默认值)：在运动结束之后回到初始位置，在延迟的情况下，让0%里面的效果在延迟后生效。

    backwards:在延迟的情况下，让0%里面的效果在延迟前生效。

    forwards：在运动结束之后，停到结束位置（重点记忆）。

    both:backwords和forwards同时生效

animation 复合式写法

animation: play 2s linear 0.5s infinite;
/*分别表示的是动画名称是play，动画持续时间为2s，动画频率为匀速，延迟时间为0.5s，无限循环，循环的方式是alternate即先正常运行再反方向运行，并持续交替运行*/

【注】过渡时间和延迟时间顺序不能互换，若同时出现，则前面是过渡时间，后面的是延迟时间。

动画内容并不难理解，效果也很炫酷，就是属性太多，单词太多，用简写还是比较方便滴~