css动画transition

/* CSS 代码示例：使用 transition 实现简单的鼠标悬停动画效果 */

/* 定义一个盒子的初始样式 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 0.5s ease, background-color 0.5s ease;
}

/* 当鼠标悬停在盒子上时，改变其样式 */
.box:hover {
  transform: rotate(360deg) scale(1.5);
  background-color: red;
}

解释说明：

• transition 属性用于定义元素在不同状态之间的过渡效果。在这个例子中，我们为 .box 元素设置了两个属性的过渡效果：transform 和 background-color。
• transition: transform 0.5s ease, background-color 0.5s ease; 表示当 transform 或 background-color 发生变化时，会在 0.5 秒内平滑过渡，且过渡的缓动函数为 ease（即先慢后快再慢）。
• 当鼠标悬停在 .box 上时，通过 :hover 伪类触发样式变化，盒子会旋转 360 度并放大到 1.5 倍，同时背景颜色从蓝色变为红色。

这个示例展示了如何使用 transition 来创建简单的 CSS 动画效果。