为什么我的第二个延迟 CSS 动画把一切都搞砸了？

Question

我只是为一个简单的文本制作动画，然后，过了一段时间，我希望它消失，但是出现了一些问题：

当它第一次淡入时，您可以看到根本不考虑不透明度值，文本几乎是凭空出现的。
当它淡出时，您可以看到移动很奇怪并且不透明度过渡运行在运动。

#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>

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

Answer 1

属性 opacity 从 0 变为 1，因此变化几乎是瞬间发生的。关于离开时的奇怪动作，我觉得还好。

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

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

Answer 2

检查此代码，希望对您有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #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-name: showMessage;
            animation-duration: 3s;
            animation-delay: 500ms;
            animation-direction: alternate;
        }

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

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

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

            100% {
                opacity: 0;
                transform: translate3d(-65px, 0, 0);
            }
        }
    </style>
</head>
<body>
    <div id="container">
    <div id="message">
        Hey, look at me!
    </div>
</div>
</body>
</html>

为什么我的第二个延迟 CSS 动画把一切都搞砸了？

How come my second, delayed CSS animation is messing up everything?

css

css-transitions

css-animations