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

【问题标题】：How come my second, delayed CSS animation is messing up everything?为什么我的第二个延迟的 CSS 动画把一切都搞砸了？
【发布时间】：2020-08-03 01:46:05
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css css-animations css-transitions

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：