当前位置：首页 > news >正文

CSS3 中 transition 和 animation 的属性分别有哪些

news 2025/8/14 8:34:13

Transition 属性：

transition 属性用于定义元素在状态改变时从一个样式转换到另一个样式的过渡效果。它包含以下几个属性：
• transition-property：指定过渡效果应用的 CSS 属性名称，多个属性可以用逗号分隔。
• transition-duration：指定过渡效果的持续时间，单位可以是秒(s)或毫秒(ms)。
• transition-timing-function：指定过渡效果的时间曲线，也就是过渡的速度变化函数。
• transition-delay：指定过渡效果开始之前的延迟时间，单位可以是秒(s)或毫秒(ms)。

/* 定义一个简单的过渡效果 */
.box {width: 100px;height: 100px;background-color: red;transition: width 1s ease-in-out;
}.box:hover {width: 200px;
}

上面的示例中，当鼠标悬停在.box元素上时，宽度从100px过渡到 200px，过渡持续时间为 1 秒，过渡速度为 ease-in-out。

Animation 属性：

animation 属性用于定义复杂的动画效果，可以自定义关键帧（keyframes）来实现更复杂的动画效果。它包含以下几个属性：
• animation-name：指定定义动画的关键帧名称。
• animation-duration：指定动画的持续时间，单位可以是秒(s)或毫秒(ms)。
• animation-timing-function：指定动画的时间曲线，也就是动画的速度变化函数。
• animation-delay：指定动画开始之前的延迟时间，单位可以是秒(s)或毫秒(ms)。
• animation-iteration-count：指定动画的重复次数，可以使用一个整数值或 infinite（表示无限循环）。
• animation-direction：指定动画的播放方向，可以是 normal（默认），reverse（反向播放），alternate（正向再反向循环），或 alternate-reverse（反向再正向循环）。
• animation-fill-mode：指定动画在非运行时的样式，可以是 none（默认），forwards（保持最后一帧的样式），backwards（应用第一帧的样式），或 both（同时应用第一帧和最后一帧的样式）。
• animation-play-state：指定动画的播放状态，可以是 running（默认，动画正在播放）或 paused（动画暂停）。

/* 定义一个简单的动画 */
@keyframes slide-in {0% {transform: translateX(-100%);}100% {transform: translateX(0);}
}.box {width: 100px;height: 100px;background-color: red;animation: slide-in 1s ease-in-out infinite alternate;
}