CSS中transition与animation的功能与不同

friend_ship2024-10-28 20:14

1.transition过渡

transition属性用于指定元素从一个状态到另一个状态时的过渡效果，在给定的时间内平滑而自然地改变属性值。

css 复制代码

transition: property duration timing-function delay;

property: 指定应用过渡效果的CSS属性名称。可以使用all来指定所有可动画的属性。
duration: 过渡效果的持续时间，例如 1s 或 500ms。
timing-function: 过渡效果的速度曲线，常用的是linear、ease、ease-in、ease-out 和 ease-in-out。
delay: 过渡效果开始前的延迟时间，例如 1s。

css 复制代码

button {
    background-color: aquamarine;
    transition: background-color 0.5s ease;    
}
button:hover {
    background-color:aqua;
}
/* 所有属性过渡 */
.all-properties {
    transition: all 0.5s ease 2s;
}

2.animation动画

animation允许通过关键帧来定义动画，可以实现更为复杂和连续的动画效果。

css 复制代码

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name：@keyframes 名称。
duration: 过渡效果的持续时间。
time-function: 动画的速度曲线。常用的是ease、linear、ease-in、ease-out、ease-in-out。
delay: 动画效果开始前的延迟时间，例如 1s。
iteration-count: 设置 infinite 动画将永远持续下去或设置自然数字。
direction: 指定向前播放、向后播放还是交替播放动画。常用的是normal、reverse、alternate、alternate-reverse。
fill-mode: 在不播放动画时的样式（在开始之前，结束之后，或两者都结束时）,默认值是none。常用的是none、forwards、backwards、both。
play-state：规定动画是运行还是暂停。默认值是running。常用的是running、paused。

css 复制代码

/* 定义关键帧 */ 
@keyframes expand {
    0% { transform: scale(1); }
    100% { transform: scale(1.5); }
}

/* 应用动画 */
.animated-box {
    width: 300px;
    line-height: 30px;
    background-color: rgb(0, 255, 145);
    animation: expand 2s ease-in-out 1s infinite alternate;
}

3.不同之处

目的：transition 主要用于处理元素状态的过渡，animation用于创建更为复杂和连续的动画效果。
使用场景：transition适用于简单的显示/隐藏动画，animation适用于需要精确控制的复杂动画序列。
控制程度：animation提供了更多的动画控制选项，如动画的播放状态、速度曲线等。