CSS3动画

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这一章有必要单独拿出来写一篇,尼玛有点复杂。。。骚等