动画(animation)是CSS3中具有颠覆性的特征之一,可以通过设置多个节点来精确控制一个或一组动画,常来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。
动画的基本使用
制作动画分为两步:
- 先定义动画
- 再使用(调用)动画
1.用 keyframes 定义动画(类似定义类选择器)
语法:
@keyframes 动画名称{
0%{
//定义初始状态,如
width:100px;
}
100%{
//定义最终状态,如
width:200px;
}
}
这里如果只定义初始状态与最终状态的话,也可以写成如下形式:
@keyframes 动画名称{
from{
//定义初始状态,如
width:100px;
}
to{
//定义最终状态,如
width:200px;
}
}
但其实要形成复杂点的效果,往往用百分比,因为可以在0%-100%之间更精确的划分,比如20%、50%等。
2.元素使用动画
语法:
元素{
animation-name:动画名称;
animation-duration:持续时间;
}
animation里面有很多属性,但是animation-name:动画名称和 animation-duration:持续时间是必须要写的。
3.动画常用属性
属性 | 描述 |
---|---|
@keyframes | 定义动画 |
animation | 所有动画的简写属性,除了animation-play-state属性 |
animation-name | 规定@keyframes动画的名称 (必填) |
animation-duration | 规定动画完成一个周期所花费的时间,默认是0 (必填) |
animation-timing-function | 规定动画的速度曲线,默认是"ease" |
animation-delay | 规定动画何时开始,默认是0 |
animation-iteration-count | 规定动画播放的次数,默认是1,无限循环是infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是normal,逆向是alternate |
animation-play-state | 规定动画是否正在运行或暂停。默认是running,暂停时paused |
animation-fill-mode | 规定动画结束后的状态,默认时backwards,保持是forwards |
对于animation-timing-function,可以取如下曲线值:
值 | 描述 |
---|---|
linear | 匀速进行 |
ease | 默认,以低俗开始,先加速后减速 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps(n) | 通过设置步长为n,将动画分成n份间隔进行 |
其中steps()可以用来做类似打字效果,或者一组动画间隔播放的效果。
4.动画简写属性
语法:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;
如:
animation:myanimation 2s linear 2s infinite alternate;
注意:
- 简写属性里不包含 animation-play-state
- 暂停动画:animation-play-state:paused;经常和鼠标经过等其他配合使