CSS3动画效果animation

最新推荐文章于 2025-05-23 11:26:23 发布

BERWIN89

最新推荐文章于 2025-05-23 11:26:23 发布

阅读量634

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/BERWIN89/article/details/53770939

本文介绍了CSS3的动画效果，包括如何使用animation属性来设置动画名称、时长、速率、播放次数、延迟时间、播放方向和状态。详细解释了各种速率曲线（如ease、linear等）以及正向和反向播放的概念，并给出了创建动画的关键帧语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动画效果

例： animation aa 0.5s ease/linear n/infinite 2s normal/alternate running/paused

说明：
aa: 名称单独写时为animation-name
0.5s: 动画时长单独写时为animation-duration
ease/linear 速率单独写时为animation-timing-function
linear为匀速；
ease为低速开始，然后加快，结束前慢；
ease-in 低速开始；
ease-out低速结束；
ease-in-out低速开始和结束

n/infinite 播放次数/循环播放单独写时为animation-iteration-count
2s 动画何时开始单独写时为animation-delay
normal/alternate 正向播放/反向播放单独写时为animation-direction
unning/paused 动画运行/暂停单独写时为animation-play-state

创建动画
@keyframes aa{动画设置语句}