为什么我的第二个，延迟的CSS动画是混乱的一切？

Question

我只是动画一个简单的文本，然后，一段时间后，我希望它消失，然而，出现了几个问题：

>

当它第一次淡出时，您可以看到不透明度值根本没有得到尊重，文本几乎是突然出现的。

当它淡出时，你可以看到移动是怪异的，不透明度过渡运行在移动之后。

null

#container {
  width: 960px;
  height: 200px;
  border: 1px solid black;
  position: absolute;
}

#message {
  position: relative;
  z-index: 2;
  color: black;
  font-size: 18px;
  opacity: 0;
  top: 60px;
  left: 100px;
  transform: translate3d(0, -25px, 0);
  animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}

@keyframes showMessage {
    0% {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
    }

    100% {
        opacity: 100;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hideMessage {
    0% {
        opacity: 100;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }
}

<div id="container">
  <div id="message">
    Hey, look at me!
  </div>
</div>

null

什么给了？如果我移除第二个动画，一切就会恢复正常。

Answer 1

属性opacity从0变为1，因此更改几乎是即时发生的。关于离开时的奇怪动作，我觉得很好。

null

#container {
  width: 960px;
  height: 200px;
  border: 1px solid black;
  position: absolute;
}

#message {
  position: relative;
  z-index: 2;
  color: black;
  font-size: 18px;
  opacity: 0;
  top: 60px;
  left: 100px;
  transform: translate3d(0, -25px, 0);
  animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}

@keyframes showMessage {
    0% {
        opacity: 0;
        transform: translate3d(0, -25px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hideMessage {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }
}

html lang-html prettyprint-override"><div id="container">
  <div id="message">
    Hey, look at me!
  </div>
</div>