CSS transition和animation的用法和区别
Transition和Animation在CSS中都是用于实现元素状态变化的效果，但它们在用法和特性上存在明显的区别。
Transition
transition是过度属性，主要强调的是元素状态的过渡效果。
它通常用于在元素的状态发生变化时，平滑地过渡到一个新的状态。
Transition的语法包括指定要过渡的CSS属性、过渡效果的持续时间、速度曲线以及开始延迟等。
例如，当鼠标悬停在div元素上时，可以使用Transition来实现宽度和高度的平滑过渡：
div { width: 100px; height: 100px; background-color: red; transition: width 1s ease-in-out, height 0.5s linear;
} div:hover { width: 200px; height: 200px;
}
在这个例子中，当鼠标悬停在div上时，其宽度和高度会平滑地过渡到新的值，过渡的持续时间分别为1秒和0.5秒，速度曲线分别为ease-in-out和linear。
Animation
animation是动画属性，加强调流程和控制，它提供了更多的自由度和复杂性。
它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。
Animation使用关键帧（keyframes）来定义动画的多个状态，并可以指定每个状态的样式。
此外，Animation还封装了循环次数、动画延迟等功能。
Animation的使用步骤如下：
-
定义动画
使用@keyframes规则来定义动画的各个状态。@keyframes change { 0% { width: 200px; } 50% { width: 500px; height: 300px; } 100% { width: 800px; height: 500px; } } -
使用动画
将定义的动画应用于需要动画效果的元素上。div { animation-name: change; animation-duration: 4s; }在这个例子中，div元素的宽度和高度会在4秒内按照定义的关键帧进行变化。
区别
-
控制粒度
Transition的控制粒度相对较粗，主要关注过渡的速度和方式。
Animation提供了更细粒度的控制，可以手动指定每个阶段的属性，以及循环次数、动画延迟等功能。 -
状态数量
Transition只有两个状态：开始状态和结束状态。
Animation可以有多个状态，通过关键帧来定义，更加灵活和自由。 -
触发方式
Transition需要借助其他方式（如CSS状态选择器或JavaScript）来触发。
Animation的触发方式则更加多样，可以通过设置动画属性直接触发。