[分享]css两种动画区别

CSS动画是现代网站设计中的重要组成部分。虽然CSS动画有很多种类型，但其中两种最常见是：transition和animation，这两种动画都可以改变元素的外观和行为。但它们的使用和效果有一些不同。...

CSS动画是现代网站设计中的重要组成部分。虽然CSS动画有很多种类型，但其中两种最常见是：

transition

和

animation

，这两种动画都可以改变元素的外观和行为。但它们的使用和效果有一些不同。

transition

transition

是最常用的CSS动画之一。作为一种简单的动画形式，它通常用来改变元素属性的值（例如颜色、大小、位置等）。使用它时，我们需要定义两个状态，即初始状态和最终状态，CSS会自动在这两个状态之间生成过渡效果。如下面的例子：

.box {
   width: 100px;
   height: 100px;
   background-color: blue;
   transition: background-color 1s;
}
.box:hover {
   background-color: red;
} 

这个例子中，当鼠标悬停时，.box元素的背景颜色会从蓝色平滑地过渡到红色，整个过渡时间为1秒钟。

animation

animation

是一种更复杂的CSS动画形式，它可以在元素上创建连续的动态效果。使用它时，我们需要定义一个或多个动画阶段，每个阶段都有其自己的动画属性。例如：

.box {
   width: 100px;
   height: 100px;
   background-color: blue;
   animation: rotate 2s ease-in-out infinite;
}
@keyframes rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
} 

这个例子中，我们定义了一个名为rotate的动画，它让元素在两秒钟内以ease-in-out的速度无限地旋转360度。我们使用@keyframes规则来定义动画阶段，包括起始状态和结束状态。在这个例子中，我们定义了一个起始状态（0%）和一个结束状态（100%），并使用逆时针旋转360度的变形来完成过渡效果。

总结

尽管pre>transition和

animation

都是CSS动画的重要形式，但它们用法和效果上有一些不同。

transition

是一种简单的过渡效果，常常用于改变元素属性的值，而

animation

则是一种复杂的动画效果，常常用于创建元素的连续动画。在使用CSS动画时，需要根据具体的情况选择合适的动画形式，以达到最佳的动画效果。