Попытка реализовать CSS-анимацию

Question

Привет, я пытаюсь реализовать анимацию CSS, я реализовал @keyframes, но моя анимация не применяется к моему div.

мой ключевой кадр

@keyframes fadeIn {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
}

Пожалуйста, скажите мне, где яя неправ.

Answer 1

<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: mymove 5s infinite;
}

@keyframes mymove {
    0%   {top: 0px;opacity:0;}

    100% {top: 100px;opacity:1;}
}
</style>

<div></div>

Answer 2

Вы все сделали правильно, но вы не создали класс, который будет реализовывать анимацию

Создайте два класса CSS следующим образом

.fadeIn {
  animation-name: fadeIn;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

animation-name - это имя ваших ключевых кадровв вашем примере, например, fadeIn.

Теперь используйте эти два класса в вашем div, где бы вы ни хотели реализовать.

Надеюсь, это поможет.