CSS动画延迟不会触发

Question

很想知道为什么这个简单的动画延迟似乎不起作用。我只想在元素淡入之前延迟7秒。非常简单，但是现在已经很久了。

＆＃13;

＆＃13;

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  animation: fadein 2s linear;
  -webkit-animation: fadein 2s linear;
 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<div class= "box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在动画之后放置动画延迟，因为延迟需要附加到相关动画上（顺序很重要）：

＆＃13;

＆＃13;

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  -webkit-animation: fadein 2s linear;
   animation: fadein 2s linear; 
  -webkit-animation-delay: 7s;
   animation-delay: 7s;
 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<div class="box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

或者使用简写方式，移除animation-delay: 7s;和-webkit-animation-delay: 7s;并将延迟时间添加到animation属性，如下所示：

-webkit-animation:fadein 2s linear 7s;
 animation:fadein 2s linear 7s;

＆＃13;

＆＃13;

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
  background: red;
  color: black;
  text-align: center;
  -webkit-animation: fadein 2s linear 7s;
  animation: fadein 2s linear 7s;
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<div class="box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用长格式animation属性：

• animation-delay
• animation-name
• animation-duration
• animation-timing-function

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  opacity: 0;
  -webkit-animation-delay: 7s;
  -webkit-animation-name: fadein;
  -webkit-animation-duration: 2s; 
  -webkit-animation-timing-function: linear;
  animation-delay: 7s;
  animation-name: fadein; 
  animation-duration: 2s;
  animation-timing-function: linear;
 
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<div class= "box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

Answer 3

下面这段代码的工作原理我将盒子的初始不透明度设置为0，因此它会在＃34;中消失。动画延迟属性似乎只有在动画本身之后才能说明它。我还添加了动画填充模式：前锋;在动画之后保持框显示。

＆＃13;

＆＃13;

.box1 {
  width: 100px;
  margin: 0 auto;
  position: relative;
  border: 1px solid blue;
}
.box2 {
   background: red;
  color: black;
  text-align: center;
  animation: fadein 2s linear;
  -webkit-animation: fadein 2s linear;
  animation-delay: 7s;
  -webkit-animation-delay: 7s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  opacity: 0;
 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

＆＃13;

<div class= "box1">

  <div class="box2">

    <p>some text</p>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;