[分享]css关键帧动画效果图

CSS关键帧动画是CSS3新增的动画属性，可以自定义动画的各个阶段，制作出更为精彩的动画效果。下面是一个简单的css关键帧动画效果图： .box { width: 100px; height: 100...

CSS关键帧动画是CSS3新增的动画属性，可以自定义动画的各个阶段，制作出更为精彩的动画效果。下面是一个简单的css关键帧动画效果图：

 .box {
      width: 100px;
      height: 100px;
      background-color: red;
      animation: move 2s infinite;
    }
    
    @keyframes move {
      0% {
        transform: translateX(0);
      }
      
      50% {
        transform: translateX(200px);
      }
      
      100% {
        transform: translateX(0);
      }
    } 

.box类代表了一个div方块，通过这段CSS代码，实现了一个向右移动200px再返回的动画效果。我们可以通过改变关键帧的百分比来控制动画的各个阶段，其中transform属性代表位移。在这个示例中，动画的时间为2秒，无限循环播放。

除了translate位移，我们还可以使用其他各种CSS属性，如opacity、scale等来制作丰富多彩的关键帧动画效果。使用css关键帧动画，我们可以轻松实现网页的动态效果，让网页内容更加生动有趣。