css动画

　　一、css动画（animation）属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比、位置和颜色。

 

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

• 默认值：	none 0 ease 0 1 normal
  继承性：	no
  版本：	CSS3
  JavaScript 语法：	object.style.animation="mymove 5s infinite"

•  语法：animation: name duration timing-function delay iteration-count direction;

• 、动画属性
  1、animation-name：指定要绑定到选择器的关键帧的名称。
  2、animation-duration：定义动画完成一个周期需要多少秒或毫秒
  3、animation-timing-function：指定动画将如何完成一个周期。
  4、animation-delay：定义动画什么时候开始。
  5、animation-iteration-count ：定义动画应该播放多少次。
  6、animation-direction：定义是否循环交替反向播放动画。
  7、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
  8、animation-play-state：指定动画是否正在运行或已暂停。
  二、动画相关
  1、animation的简写（即上述属性的介绍顺序）
  2、keyframes：定义动画规则，关键帧。
  3、浏览器前缀
  4、定义动画时，必须定义动画的名称和动画的持续时间。如果省略持续时间，动画将无法运行，因为默认值是0。

  
  
  

• linear	动画从头到尾的速度是相同的。
  ease	默认。动画以低速开始，然后加快，在结束前变慢。
  ease-in	动画以低速开始。
  ease-out	动画以低速结束。
  ease-in-out	动画以低速开始和结束。
  cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  step-start	在变化过程中，都是以下一帧的显示效果来填充间隔动画
  step-end	在变化过程中，都是以上一帧的显示效果来填充间隔动画
  steps()	可传入两个参数，第一个是大于0的整数，将动画等分成指定数目的小间隔动画，根据第二个参数来决定显示效果。第二个参数设置后和step-start，step-end同义，在分成的小间隔动画中判断显示效果。