1、定义关键帧
@keyframes 动画名称(英文) {
0% {
/* 动画的开始 */
}
25% {
/* 在25%的时候进行的一个动画 */
}
50% {
/* 在50%的时候进行的一个动画 */
}
100% {
/* 动画结束 */
}
}
from,to表示开始、结束状态,也可以使用0%,100%定义
@keyframes 动画名称(英文) {
from {
/* 动画开始 */
}
to {
/* 动画结束 */
}
}
2、引用帧动画
animation: name duration timing-function delay iteration-count direction fill-mode;
animation: 动画名称 动画执行时间 动画速度曲线 延迟时间 动画播放次数 动画运动方向 动画结束之后显示的状态
注意ÿ