CSS3动画

css

What the FUCK is CSS3动画？

CSS animations可以让一个css样式以动画形式过渡到另一个样式。Animations 由两部分组成，一组描述元素的animation属性和一组keyframes。后者定义动画样式的起始状态，期间可能走过的轨迹和结束状态；前者配置动画的时机，持续时间等动画的细节。分别介绍如下

@keyframes

keyframes用百分比来定义动画元素在动画开始后的时间段该如何渲染。比如0%到100%（可用from和to替代）为开始时和结束时刻，也可以百分比指定期间任意时刻，当然起始和结束这两个时间点是必需的，若没有指定keyframes是无效的且动画被忽略.
note：
1,若重复命名keyframes，则最后一个keyframes被解析，之前命名的不会被解析。
2,若重复设定时间点，则最后一个起作用，前面的被忽略。
3，只有在0%和100%时刻中都定义了的样式属性才会在动画中被执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@keyframes slidein{...}   //重复命名，被忽略，不会被解析
@keyframes slidein {
  from {
    top: 0;
    left: 0; 
  }
  30% {top:50px;left:50px;} //时刻重复被忽略(FF14中left会执行)
  30% {
    top:100px;
    margin-left:100px;     //0%、100%时刻未定义该属性，被忽略
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

keyframes兼容性：
兼容性

配置动画属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
animation-delay ：
设置多久后开始执行(1s、1ms),负值时第一次动画从半途中开始渲染
animation-reverse :  运行方向
normal/ reverse/    alternate/  alternate-reverse
*normal*    : 默认值   
*reverse*   ：每个周期内动画从100%至0%反向渲染
*alternate* ： 先正向运动后反向运动
*alternate-reverse* ： 先反向运动后正向运动
alternate-reverse： 一个动画周期的时长
animation-iteration-count：动画执行几个周期 （2.1/2/infinite）
animation-name: 关键帧keyframes的名字
animation-play-state：运行状态，paused暂停，running运行

为提高准确性本文从mdn英文原文翻译过来（原汉化的有毒），且每个方法都经过测试。。。
animation-timing-function这一章有必要单独拿出来写一篇，尼玛有点复杂。。。骚等