首页 > 代码库 > 关键帧动画

关键帧动画

2024-09-04 10:12:25   214人阅读

<style type="text/css">
.demo{
animation-name: demoAnimation; 定义关键帧动画的名称 名称为我们使用@keyframes定义的动画
animation-duration: 2s;动画持续时间
animation-delay: 2s;设置动画的延迟进行时间 在关键帧动画里该属性对于动画回去的时候没有效果这点和过渡动画不同
animation-iteration-count: infinite;设置动画进行的次数 infinite代表无限次
animation-direction:alternate-reverse;定义动画在进行时的方向
默认值是normal代表动画正常时候的播放
reverse代表设置动画反向播放
alternate动画在奇数次正向播放，在偶数次反向播放
alternate-reverse设置动画奇数次反向播放 偶数次正向播放
animation-play-state: paused;设置动画暂停 默认是running
animation-fill-mode: forwards;设置动画的填充规则，即规定动画在播放之前或者之后，其动画效果是否可见
forwards代表在动画结束时保留最后一帧
animation-fill-mode: backwards;
backwards代表在animation-delay存在的时候等待时显示的为第一帧，不设置该属性的时候等待的显示为初始状态
both forwards和backwards都有
animation-timing-function: step-end;
steps()有两个参数第一个参数是数字代表动画进行的帧数，但是该数字设置的每个动画阶段的帧数
第二个参数可以是end或者start 默认是end
end代表在进行动画的时候省略100%的那一个状态
start代表在进行动画的时候省略0%的那个状态
step-start其和steps(1,start)一样
step-end其和steps(1,end)一样
}
 例.demo:hover{ animation-play-state: paused; } 在鼠标放在动画上暂停
@keyframes demoAnimation{
0%{width: 100px; }
50%{ width: 200px; }
100%{ width: 300px; }
}
@keyframes可以让我们来自定义关键帧动画，from代表动画开始的状态 也可以用0%，to代表是动画结束的状态 也可以用100%
</style>

关键帧动画


联系
我们