Почему моя вторая отложенная анимация CSS все испортила? - PullRequest
Новая
       112

Почему моя вторая отложенная анимация CSS все испортила?

0 голосов
/ 03 августа 2020

Я просто анимирую простой текст, а затем, через некоторое время, я хочу, чтобы он исчез, однако появляется несколько проблем:

  1. Когда он сначала исчезает в вы можете видеть, что значение непрозрачности вообще не соблюдается, текст появляется практически из ниоткуда.

  2. Когда исчезает , вы можете видеть, что движение странное, а переход прозрачности выполняется после движения. 

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

Что дает? Если убрать вторую анимацию, все вернется в норму.

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

Проверьте этот код, надеюсь, он вам поможет. 

<!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>
0 голосов
/ 03 августа 2020

Свойство 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>
...