CSS3之animation动画

CSS3之animation动画

animation-name属性

作用：定义动画的名字
ps：光有动画名称不能是动画动起来
与@keyframes动画关键帧合用
语法：
animation-name {动画名称}；
@keyframes 动画名称{
from {开始动画}
to{结束动画}
}

animation-duration 属性

作用：过渡持续的时间
语法：animation-duration：time
注：动画需要有duration持续时间属性才能运动起来
直接在设置的元素下添加即可，keyframes里面只用添加动画内容

animation-time-function

作用：动画过渡的方式

1. linear 匀速运动

2. ease 平滑过渡（默认），逐渐加快，快到一定速度变慢

3. ease-in 由快到慢

4. ease-out 由慢到快

5. ease-in-out 由慢到快再到慢（最人性化）

6. step-start 等同于step（1，star）以开始的形态

7. step-end 等同于star（1，end）

8. step（参数一：正整数，参数二：star/end）

   后三个不常用，了解即可

animation之delay延迟属性

作用：在动画执行前的延迟，单位为秒/毫秒（属于动画之外的时间）
注：若delay为负值，则直接进入动画，且跳过该值的执行过程时间

用这些属性实现一个飞入效果：