CSS3 动画如何添加过渡效果

在 CSS3 中，可以通过使用 transition 属性为动画添加过渡效果。以下是一个简单的示例，展示了如何为元素添加过渡效果：

1. 首先，定义一个 CSS 类，用于应用动画效果：

.my-animation {
  /* 动画持续时间 */
  animation-duration: 2s;
  
  /* 动画类型 */
  animation-timing-function: linear;
  
  /* 动画延迟 */
  animation-delay: 0s;
  
  /* 动画迭代次数 */
  animation-iteration-count: infinite;
  
  /* 动画正常播放 */
  animation-direction: normal;
  
  /* 动画播放完成后保持结束状态 */
  animation-fill-mode: forwards;
  
  /* 动画名称 */
  animation-name: my-animation-keyframes;
  
  /* 动画速度曲线 */
  animation-timing-function: ease;
  
  /* 动画名称 */
  animation-name: my-animation;
}

2. 接下来，定义关键帧动画：

@keyframes my-animation-keyframes {
  0% {
    /* 动画开始时的样式 */
    transform: translateY(0);
  }
  100% {
    /* 动画结束时的样式 */
    transform: translateY(-20px);
  }
}

3. 最后，将定义好的动画类应用到 HTML 元素上：

<div class="my-animation">我是一个有动画效果的 div 元素</div>

这样，当元素添加 my-animation 类时，它将应用定义好的动画效果。你可以根据需要调整动画的各种属性值，以实现不同的过渡效果。