css的动画和过渡-优快云博客

本文详细介绍了CSS中的过渡和动画效果实现方式，包括过渡的基本属性如transition-property、transition-duration等，以及动画的关键帧定义方法@keyframes，并列举了具体的应用示例。

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

一、过渡：

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property 规定应用过渡的 CSS 属性的名称。

transition-duration 定义过渡效果花费的时间。默认是 0。

transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

transition-delay 规定过渡效果何时开始。默认是 0。

eg：

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

二、动画：

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

1、animation 所有动画属性的简写属性，除了 animation-play-state 属性。

2、animation-name 规定 @keyframes 动画的名称。

3、animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。

4、animation-timing-function 规定动画的速度曲线。默认是 "ease"。

5、animation-delay 规定动画何时开始。默认是 0。

6、animation-iteration-count 规定动画被播放的次数。默认是 1。

7、animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。

8、animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

9、animation-fill-mode 规定对象动画时间之外的状态。

eg：

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

转载于:https://www.cnblogs.com/yuepangzi/p/5883569.html