[分享]css动画使用百分比

CSS动画可以让网站变得更加生动，吸引人们的眼球。而为了让动画可以自由的适应各种尺寸，我们就需要使用百分比。/ 使用百分比控制动画 / keyframes example { / 百分比指示动画的进度...

CSS动画可以让网站变得更加生动，吸引人们的眼球。而为了让动画可以自由的适应各种尺寸，我们就需要使用百分比。

/* 使用百分比控制动画 */
@keyframes example {
  /* 百分比指示动画的进度 */
  0% {
     /* 初始状态 */
     transform: translateX(0%);
  }
  100% {
     /* 结束状态 */
     transform: translateX(100%);
  }
} 

在这个例子中，我们使用了@keyframes关键字来定义一个名为example的动画。在动画中，我们使用了两个关键帧，分别在0%和100%的位置，并使用transform属性在这两个关键帧中设置不同的值。

在初始状态中，transform属性中使用的是translateX(0%)，也就是在X轴方向上没有偏移。而在结束状态中，我们使用的是translateX(100%)，也就是在X轴方向上偏移了整个父容器的宽度。

这样，无论父容器的宽度是多少，动画都可以自适应地变化，达到更好的效果。