CSS3动画属性

CSS3动画

设置CSS3动画的一般流程

1. 设置关键帧
2. 将关键帧绑定到元素上
3. 设置动画的播放时间

关键帧动画设置

使用@keyframes [名称] 的形式来定义关键帧。

1. 使用form……to……来设置（动画时间开始到结束的样式）
2. 使用百分比来规定整个播放时间中各个百分比时的样式

示例：

@keyframes example{/*第一种方式*/
    form {font-size:50px}
    to{font-size:30px}
}
@keyframes example{
    10%{font-size: 50px}
    50%{font-size: 30px}
    90%{font-size: 10px}
    100%{font-size: 0px}
}

给dom元素配置关键帧

1. 使用animation-name: [关键帧名称]，将关键帧绑定到dom上（必须绑定dom元素，不然怎么知道那个元有动画呢？）
2. 使用animation-duration:[时间]，设置动画播放时间（必须设置因为默认的时间为0s，是没有动画的）
3. animation-delay:[时间]，延时动画，动画将这设置的时间后延时播放（可以是负值，代表已经播放了一段时间）
4. animation-iteration-count:[次数]，设置动画播放的次数，infinite代表无限次
5. animation-direction:[normal/reverse/alternate/alternate-reverse]，表示动画的走向，normal是正向（默认），reverse是逆向，alternate是先正向再逆向，alternate-reverse代表先逆向再正向
6. animation-timing-function:[ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)]，设置动画的速度，ease由慢到快再到慢（默认），linear匀速，ease-in慢速开始，ease-out慢速结束，ease-in-out慢速开始慢速结束，cubic-bezier(n, n, n, n)贝塞尔函数决定速度
7. animation-fill-mode:[none/forwards/backwards/both ]，设置动画的样式是否影响元素的样式，none动画运行完成后对元素样式无影响，forwards动画运行完成后保留最后一帧的样式，backwards动画运行完成后保留第一帧的样式（延时期间也是第一帧样式），both 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性
8. animation:[属性]，组合属性，上面所有属性的集合。

示例：

p{
 	animation-name: example;  
    animation-duration:5s;
}

扩展

要做出各种动作的css动画一般还需要使用css3 的过渡属性，2D转换，3D转换等