Html 在文本移动动画中添加淡出_Html_Css_Webkit

Html 在文本移动动画中添加淡出

html css

Html 在文本移动动画中添加淡出,html,css,webkit,Html,Css,Webkit,我是一个新手，我只是想添加淡出在我的文字移动后，它已经完成移动。但问题是我已经把@keyframe淡出了。然后，逐渐消失。但它不起作用。需要帮忙吗？非常感谢。这是代码 HTML 除非您有理由将其拆分，否则您可以将其全部放在同一个动画中，方法是再添加一个步骤，如下所示：正文{ 字体系列：无衬线；利润率：50像素； } h1{ 动画：向前移动3s； -webkit动画：向前移动3秒； } @关键帧移动{ 从{ 左边距：100%；宽度：300%； } 90% { 左边缘：0%；宽度：100%

我是一个新手，我只是想添加淡出在我的文字移动后，它已经完成移动。但问题是我已经把@keyframe淡出了。然后，逐渐消失。但它不起作用。需要帮忙吗？非常感谢。这是代码

HTML

除非您有理由将其拆分，否则您可以将其全部放在同一个动画中，方法是再添加一个步骤，如下所示：

正文{
字体系列：无衬线；
利润率：50像素；
}
h1{
动画：向前移动3s；
-webkit动画：向前移动3秒；
}
@关键帧移动{
从{
左边距：100%；
宽度：300%；
}
90% {
左边缘：0%；
宽度：100%；
背景：线性梯度（透明150px，白色）；
不透明度：1；
}
到{
不透明度：0；
}
}
@-webkit关键帧移动{
从{
左边距：100%；
宽度：300%；
}
90% {
左边缘：0%；
宽度：100%；
不透明度：1；
}
到{
不透明度：0；
}
}


看着我移动

非常感谢您，但是如果我想要两个文本动画，例如在h1文本淡出后，第二个文本将出现，该怎么办？非常感谢您为它添加了一个新类，并延迟使用相同的动画，下面是一个示例：。注意，我在新类中添加了visibility hidden，然后是visibility:visibility:visibility:visibility:visibility:visibility:visibility:visible:visibility:visibility:visible:visible:visible

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<h1>Watch me move</h1>

</body>
</html>

    body {
  font-family: sans-serif;
  margin: 50px;
}

h1 {
  animation: move 8s;
  -webkit-animation: move 8s;
}

@keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
        background:linear-gradient(transparent 150px, white);
  }
}

@-webkit-keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }

}
  @-webkit-keyframes fadeOut {
            0% {opacity: 1;}
            100% {opacity: 0;}
         }

         @keyframes fadeOut {

         }

         .fadeOut {
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         }