动画(animation)是CSS3中具有颠覆性特征之一,可通过设置多个节点来精准控制一个或一组动画,常用来实现复杂的风化效果。
相比较过渡,动画可以实现更多变化、更多控制、连续播放等效果。
一、动画的基本使用
制作动画分为两部:
- 先定义动画
- 再使用(调用)动画
1. 用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称 {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
动画序列:
- 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
- 动画是使某元素从一种样式逐渐变化为另一种样式的效果,可以任意次数地改变成任意样式
- 用百分比来规定变化发生的时间,或关键词"from"和"to",等同于0%和100%
2. 元素使用动画
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-time: 持续时间;
}
3. 动画常用的属性
属性 | 描述 |
@keyfr |