动画属性详细说明以及案例
2025-03-11
14
动画属性用于定义CSS动画的行为，包括动画的持续时间、延迟、迭代次数、方向、填充模式等。以下是常用动画属性的详细说明及案例：
animation-name: 定义动画名称，对应@keyframes规则。animation-duration: 定义动画完成一个周期所需的时间，单位为秒（s）或毫秒（ms）。animation-timing-function: 定义动画的速度曲线，如ease、linear、ease-in等。animation-delay: 定义动画开始前的延迟时间，单位为秒（s）或毫秒（ms）。animation-iteration-count: 定义动画播放的次数，可以是数字或infinite表示无限次。animation-direction: 定义动画是否反向播放，如normal、reverse、alternate等。animation-fill-mode: 定义动画执行前后如何应用样式，如none、forwards、backwards等。animation-play-state: 定义动画的播放状态，如running、paused。
案例：
@keyframes example {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}在这个案例中，div元素将执行名为example的动画，动画持续时间为4秒，使用ease-in-out速度曲线，延迟1秒开始，无限次交替播放，动画结束后保持最后一帧的状态，动画状态为播放中。
本篇文章内容来源于：动画属性详细说明以及案例
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
