Question

我是新手，我只想在文本移动完成后在文本移动中添加淡入淡出。但是问题是我已经把@keyframe淡出了。和.fadeout。但是没有用。有什么帮助吗？谢谢。这是代码。

HTML

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

</body>
</html>

CSS

    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;
         }

Answer 1

除非有充分的理由将其拆分，否则可以通过以下步骤将其全部放入同一动画中：

body {
  font-family: sans-serif;
  margin: 50px;
}

h1 {
  animation: move 3s forwards;
  -webkit-animation: move 3s forwards;
}

@keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  90% {
    margin-left: 0%;
    width: 100%;
    background:linear-gradient(transparent 150px, white);
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@-webkit-keyframes move {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  90% {
    margin-left: 0%;
    width: 100%;
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}

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

在文本移动动画中添加FadeOut

1 个答案: