将div动画移出屏幕右侧

可以通过CSS的动画属性和关键帧来实现。以下是一个示例的实现方式：

HTML代码：

<div class="animated-div"></div>

CSS代码：

.animated-div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move-out 1s forwards;
}

@keyframes move-out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

解释：

• 首先，我们创建了一个div元素，并为其添加了一个类名"animated-div"。
• 接下来，在CSS中，我们定义了这个类名的样式。
• 我们设置了div的宽度、高度和背景颜色。
• 使用animation属性，我们将动画效果"move-out"应用于div元素，并设置了动画持续时间为1秒。
• 在@keyframes规则中，我们定义了动画的关键帧。
• 在0%的关键帧中，我们将div的水平位置设置为初始位置，即translateX(0)。
• 在100%的关键帧中，我们将div的水平位置设置为右侧屏幕之外，即translateX(100%)。
• 最后，我们使用forwards关键字，使得动画结束后div保持在最后一个关键帧的状态。

这样，当页面加载时，div元素会以1秒的动画效果从屏幕内部移动到屏幕右侧之外。