Question

我希望延迟以下命令的开始，并希望得到任何建议。我是初学者，提前谢谢你。

示例文字

Answer 1

使用动画请参阅animation css

您可以通过设置animation-delay：加载元素和动画序列开始之间的时间来延迟动画。

在我们的代码中，动画延迟设置为3s -webkit-animation: fadeout 5s linear 3s forwards;

.fadeOut {
  width: 200px;
  height: 200px;
  background: #191970;
  color: #fff;
  -webkit-animation: fadeout 5s linear 3s forwards;
  animation: fadeout 5s linear 3s forwards;
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.25;
  }
  100% {
    opacity: 0;
  }
}

<div class="xr_ap xr_ac c2" id="xr_xpxr_40"> 
<span class="xr_annt animated fadeOut c1" id="xr_uid_10"></span> </div>
<div class="xr_txt Normal_text c4"> 
<span class="xr_annt animated fadeOut c3">Sample Text</span> 
</div>

如何延迟以下淡出命令的启动？

1 个答案: