HTML5 12_动画

一.动画 (animation)

1.基本用法

1.1.from to

/*@keyframes是关键帧不能更改*/ 
@keyframes ani{
 from{
 left:0px;
 }
 to{
 left:10px; 
 } 
} 
/*使用关键帧让动画作用于元素*/ 
p {
 animation: ani 3s linear infinite alternate; 
}

1.2.百分比

@keyframes ani{
 0% { 
left: 0px;
 }
 50% {
 left: 400px;
 }
 100% {
 left:0px; 
} 
/*使用关键帧让动画作用于元素*/ 
p { 
animation: ani 3s linear infinite alternate; 
}

2.动画运动(animation-timing-function)

值	描述
linear	线性过渡
ease	平滑过渡
ease-in	由慢到快
ease-out	由快到慢
ease-in-out	由慢到快再到慢

3.动画延时(animation-delay)

定义动画什么时候开始

4.动画循环(animation-iteration-count)

infinite:无限循环

5.动画反向(animation-direction)

值	描述
normal	默认值，每个循环内动画向前循环
reverse	反向运行动画
alternate	动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向
alternate-reverse	反向开始交替正向

6.动画停止(animation-play-state)

运行：animation-play-state: running;

暂停：animation-play-state: paused;