css的过渡动画例子

CSS过渡动画是一种实现平滑过渡的方式。通过定义初始状态和结束状态，CSS会在这两个状态之间产生平滑的过渡效果。下面是一个用CSS过渡动画实现的例子：

/* 定义初始状态 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s;
}
/* 定义结束状态 */
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}
 

在这个例子中，我们使用了一个类名为box的元素作为动画对象。在初始状态下，它的宽度、高度和背景色都是红色，并且定义了一个过渡效果，持续时间为1秒。

当鼠标悬停在.box元素上时，CSS会自动产生一个过渡效果，将它的宽度、高度以及背景色逐渐变为蓝色，持续时间为1秒。这样就实现了一个平滑的过渡动画效果。

总之，CSS过渡动画是一种简单而有效的实现动画效果的方式。只需要定义初始状态和结束状态就可以自动产生平滑的过渡效果，可以用来增强网页的视觉效果，提升用户体验。