【CSS基础】10.过度动画transition和动画animation
过度动画（transition）和动画（animation）是CSS3中用于创建视觉效果的两种机制。
过度动画（transition）：
当一个属性改变时，通过指定的时长平滑地过渡到新的样式。
/* 应用于选择器的过度动画 */
.element {
transition: property duration timing-function delay;
}
/* 示例 */
.element {
transition: width 2s ease-in-out 0.5s;
}动画（animation）：
通过指定的关键帧序列来创建更复杂的动画。
/* 定义动画 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 应用动画到选择器 */
.element {
animation: name duration timing-function delay iteration-count direction fill-mode;
}
/* 示例 */
.element {
animation: example 5s infinite alternate;
}两者的主要区别在于控制权的细粒度和复杂度：过度动画通常用于简单的状态变化，而动画可以创建更复杂、多阶段的动画序列。
评论已关闭