css3动画向右移动消失

你可以使用CSS3的@keyframes和animation属性来实现这个效果。以下是一个例子：

HTML代码：

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

CSS代码：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s forwards;
}

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

解释：

1. 首先创建一个大小为100x100像素、背景色为红色的盒子。

2. 使用animation属性将盒子应用于“move”动画，持续2秒，并在动画结束时保留最终状态。

3. 在@keyframes中定义动画的细节。在0%的时候，盒子的位置是在原点。在100%的时候，盒子水平方向移动了100%的距离，同时透明度为0，即完全消失。

这样，当你在浏览器中查看时，你会看到盒子向右移动并消失了。你可以根据自己的需要调整动画的属性，比如持续时间、移动距离和透明度。