CSS 动画：绝对定位离开屏幕右侧再从左侧回来

在本文中，我们将介绍使用CSS动画实现绝对定位元素离开屏幕右侧，然后再从左侧回来的效果。

阅读更多：CSS 教程

什么是CSS动画？

CSS动画是指通过使用CSS样式表来控制HTML元素的动态变化和交互效果。通过使用关键帧（keyframes）来定义动画的起始和终止状态，可以实现各种各样的动画效果。

使用绝对定位实现离开屏幕右侧

首先，我们需要将目标元素使用绝对定位（absolute）来进行定位。绝对定位可以让元素脱离文档流，并且相对于其最近的已定位的父级元素进行定位。

#target {
  position: absolute;
  top: 50%;
  right: -100px;
  transform: translateX(100%);
}

在上面的示例中，我们将目标元素的位置设置在屏幕右侧并隐藏出视野之外。right属性设置为负值，将元素的右侧边缘定位到屏幕右侧之外。transform属性的translateX()函数将元素向右平移100%的宽度，实现完全隐藏出屏幕外。

使用CSS动画实现元素从右侧回来

接下来，我们可以使用CSS动画来实现元素从右侧回来的效果。我们需要定义一个动画关键帧（@keyframes）规则，并在其中设定元素的各帧状态。

@keyframes slideInFromRight {
  0% {
    right: -100px;
    transform: translateX(100%);
  }
  100% {
    right: 0;
    transform: translateX(0%);
  }
}

#target {
  animation-name: slideInFromRight;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

在上面的示例中，我们定义了一个名为slideInFromRight的动画关键帧。在0%的帧时，元素的位置与之前一样，也是隐藏在屏幕右侧之外。在100%的帧时，我们将元素的right属性设为0，将元素从屏幕右侧回来。

然后，我们将动画应用到目标元素（id为target的元素）上。animation-name属性指定使用的动画关键帧名称，animation-duration属性指定动画的持续时间。animation-timing-function属性用来设置动画速度曲线为ease-in-out，animation-delay属性指定动画延迟1秒开始。最后，animation-fill-mode属性设置为forwards，使得动画结束后保持在最后一帧状态，保留在屏幕左侧。

完整示例

下面是一个完整的示例，演示使用CSS动画实现了元素离开屏幕右侧再从左侧回来的效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    #target {
      position: absolute;
      top: 50%;
      right: -100px;
      transform: translateX(100%);
    }

    @keyframes slideInFromRight {
      0% {
        right: -100px;
        transform: translateX(100%);
      }
      100% {
        right: 0;
        transform: translateX(0%);
      }
    }

    #target {
      animation-name: slideInFromRight;
      animation-duration: 1s;
      animation-timing-function: ease-in-out;
      animation-delay: 1s;
      animation-fill-mode: forwards;
    }
  </style>
</head>
<body>
  <div id="target">Hello, World!</div>
</body>
</html>

在上面的示例中，我们在HTML文档中定义了一个id为target的div元素，并把之前的CSS代码放在style标签内以内联样式的方式应用于该元素。div元素默认隐藏在屏幕右侧，并在1秒后以ease-in-out的速度曲线从右侧回来。