利用 @keyframes 规则定义动画的代码如何写？

以下是一个使用 @keyframes 规则定义动画的示例代码：

@keyframes myAnimation {
   
  0% {
   
    /* 动画初始状态的样式 */
    transform: translateX(0);
  }
  50% {
   
    /* 动画中间状态的样式 */
    transform: translateX(50px);
  }
  100% {
   
    /* 动画结束状态的样式 */
    transform: translateX(100px);
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

在上述代码中，定义了一个名为 myAnimation 的动画，它在 0%、50% 和 100% 这三个关键帧上分别设置了不同的样式，从而实现动画效果。你可以根据需要修改关键帧上的样式和时间点。