CSS 帧动画 播放动画

CSS3 帧动画 amimation @keyframes

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的

@keyframes 关键帧

通过@keyframes设置自定义名称的动画关键帧 在动画关键节点设置数值

• animationName：动画名称，开发人员自己命名；

• percentage：为百分比值，可以添加多个百分比值；

• properties：样式属性名称，例如：color、left、width等等。

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
//or
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

animation 播放动画

animation-name

它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：

.selector {
    animation-name: none | IDENT[,none | IDENT]*;
}

animation-duration

它是用来设置动画的持续时间，单位为s，默认值为0：、

.selector {
    animation-duration: <time>[,<time>]*;
}

animation-timing-function

和transition-timing-function类似：

.selector {
	animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>);
}

animation-delay 

它是来设置动画的开始时间，单位是s或者ms，默认值为0：

.selector {
      animation-delay: <time>[,<time>]*;
}

animation-iteration-count

它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：

.selector {
    animation-iteration-count: number | infinite
}

animation-direction
它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

.selector {
   animation-direction: normal | alternate [, normal | alternate]*;
}

animation-play-state

它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：

PS: animation-play-state 无法通过animation复合书写 只能单例设置 与 transform-origin 一样

.selector {
    animation-play-state:running | paused [, running | paused]*;
}

animation 复合写法

它是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction的简写：

.selector {
   animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*;
}

.selector {
	animation: move
}