本文介绍了CSS中的关键帧动画，从@keyframes规则定义开始，包括from和to关键字设定动画起点和终点。接着详细阐述了animation属性的各个部分，如duration、timing-function、delay、iteration-count和direction，解释了不同取值对动画效果的影响，如动画速度曲线、延迟、播放次数和方向等。
关键帧
1帧 开始 -- 补间动画 -- 2帧结束
定义关键帧
@keyframes 名字 {
from{
动画开始
}
to{
动画结束
}
}
animation-name: run;
动画名称 绑定关键顿动画的 *
animation-duration: 1s;/* 动画执行时间 单位: s ms 1s=1000ms
animation-timing-function: ease;/ 动画的运动速度曲线 /
取值:
Linear 匀速
ease 默认值
ease-in 以慢速开始
ease-out 以慢速结束
ease-in-out 以慢速开始和结束
animation-delay: 1s;/ 动画的延迟时间
取值: s ms
默认值: 0
允许负值 (-1 使动画立马开始，但是跳过1s进入动画
animation-iteration-count: infinite;/* 规定动画的执行次数 *
取值:
n 数字
默认值 1
infinite 无限次播放动画
animation-direction:alternate;/* 定义动画是否轮流反同播放 *
取值:
normal 默认，正常播放
aLternate 动画轮流反向播放
aLternate-reverse 从第一次就反向播放
扫一扫
621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
