css3动画和css3过渡的区别

CSS3动画和过渡都是用于动态改变网页元素样式的技术，但它们的作用场景和实现方式有所不同。

**CSS3过渡 (Transition)**：
过渡是从一种样式状态平滑地变化到另一种样式状态的过程。当满足特定条件（如用户交互、定时器等）时，浏览器会自动应用预先设定好的过渡效果，比如颜色、尺寸、位置等属性的变化会在一段时间内完成。过渡通常涉及单次、短暂的变换，并且有开始时间和结束时间。

例如：

.button {
  transition: background-color 0.5s ease;
}
.button:hover {
  background-color: red; /* 过渡效果 */
}

在这个例子中，当鼠标悬停在按钮上时，背景色会在半秒内从默认颜色平滑变为红色。

**CSS3动画 (Animation)**：
动画则是更为复杂和持续的动作序列，可以包含多个关键帧，每个关键帧代表一个特定的时间点，定义了元素应该具有的样式。动画通常需要通过`@keyframes`规则来声明动画序列，并通过`animation`属性将其应用到元素上。动画可以无限循环播放，也可以设置特定次数。

例如：

@keyframes example {
  0% {background-color: green;}
  50% {background-color: yellow;}
  100% {background-color: blue;}
}

.button {
  animation: example 2s infinite; /* 动画效果 */
}

这里，按钮的背景颜色会在绿色和蓝色之间无限循环动画2秒。