css动画效果，过渡效果基础详解

最新推荐文章于 2025-07-11 22:26:45 发布

原创最新推荐文章于 2025-07-11 22:26:45 发布 · 914 阅读

CC 4.0 BY-SA版权

文章标签：

本文深入探讨CSS动画和过渡效果的实现方式，包括动画的定义、属性如animation-name、animation-duration等，以及如何通过transition属性创建平滑的过渡效果。对比了过渡与动画的使用场景，指导读者如何选择最适合的设计方案。

1.css动画效果
1.1定义动画
动画名称可以随意愿另取，定义动画帧数也可以使用from-to
1.2动画的属性

动画名称 animation-name
完成一次动画的时间 animation-duration
动画延迟 animation-delay
动画运动方向 animation-direction
reverse反向 alternate交替 alternate-reverse先反向，在交替
动画的执行次数 animation-iteration-count
infine无限次 4 4次
动画最后停留位置 animation-fill-mode
forwards最后一帧的位置 backwards第一帧的位置
动画执行的时间曲线 animation-timing-function
linear 匀速 steps（）以步数执行 ease-in先慢后快 ease-out 先快后慢 easy-in-out先慢后快再慢
动画的播放状态 animation-play-state
running播放 paused暂停
1.3速写
animation:duration timing delay interation direction
eg: animation: 4s linear 0s infinite alternate
2 过渡效果
2.1 transtion
2.2属性
transition-property 指定过渡的属性
transition-duration 过渡持续的时间
transition-timing-function 过渡的时间曲线
transition-delay 过渡延迟
2.3速写
transition:property duration timing delay;
eg：transition: margin-right 2s ease-in-out .5s;
2.4过渡效果与动画的区别
transition必须要触发，一般使用:hover
transition不需要设置关键帧
简单的过渡效果使用transition，复杂的动画使用animation