动画实现 - 左顾右盼的盒子

记一次动画实现——左右滑动的盒子

在前端开发中，我们经常需要实现一些动画效果来增强用户体验。比如，让一个盒子从中间开始，碰到最左边的边界往右移动，碰到最右边的边界往左移动，如此循环。

像这种动画实现，我们自然而然地想到使用 @keyframes 来定义动画，可以使用设置定位中的 left 值来实现盒子的移动。

那么，具体该如何实现呢？

首先，我们需要准备一个 HTML 结构，如下所示：

<div class="box"></div>

其中，.box 类就是我们要实现动画效果的盒子。

接下来，我们需要使用 CSS 来定义动画。

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes move {
  0% {
    left: 50%;
  }
  50% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

.box {
  animation: move 2s infinite alternate;
}

在上面的 CSS 代码中，我们首先设置了 .box 类的定位为 absolute，并使用 left 和 top 属性将其定位到父元素的中间。

然后，我们使用 transform 属性将 .box 类向左和平移 50%，这样就可以让盒子居中显示。

接下来，我们定义了一个 move 的动画，这个动画的持续时间为 2s，并且是无限循环的，并且是交替执行的。

在 move 动画中，我们设置了三个关键帧，分别是 0%、50% 和 100%。

在 0% 关键帧中，我们将 .box 类的 left 属性设置为 50%，这样盒子就会位于父元素的中间。

在 50% 关键帧中，我们将 .box 类的 left 属性设置为 0，这样盒子就会移动到父元素的最左边。

在 100% 关键帧中，我们将 .box 类的 left 属性设置为 100%，这样盒子就会移动到父元素的最右边。

最后，我们使用 animation 属性将 .box 类与 move 动画关联起来，这样盒子就会按照我们定义的动画效果移动。

这样，我们就实现了一个左右滑动的盒子动画效果。

当然，你也可以根据自己的需要对动画效果进行修改，比如改变动画的持续时间、改变盒子的移动速度等。