Как заставить код анимации работать в css? [код не работает у меня ...]

#html #css

#HTML #css — файл #css

Вопрос:

Кажется, я не могу найти свою ошибку, не могли бы вы мне помочь?

Я поставил -webkit- префиксы, также все элементы действительны

вот код:

  div {
width:200px;
height:200px;
background-color:red;

-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;

}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}

 <div>
hi
</div>

Я ожидал, что он переместится, но я не знаю, в чем моя ошибка в коде

1. Что не работает? Разве это не работает в других браузерах, кроме браузеров на основе chromium? Это из-за префикса, который применим только к chromium.

2. какой именно тип анимации вы хотите, вы хотите, чтобы она была нижней или что

3. Добавьте это в свою позицию кода: относительный;

4. Если какой-либо из ответов помог вам, вы должны проверить его как ответ. Это поможет и другим пользователям

Ответ №1:

Вам нужно добавить position :relative; в свой css

 div {
width:200px;
height:200px;
background-color:red;
 position :relative;
-webkit-animation: easter 5s infinite;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation: easter 5s infinite;
}
@-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}

 <!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<div>
hi
</div>
</body>

Ответ №2:

Во-первых, webkit префикс будет применяться только к браузерам на базе chromium. Во-вторых, для того, top чтобы подать заявку, вам нужно указать position что-то вроде абсолютного или относительного:

 div {
  width:200px;
  height:200px;
  background-color:red;
  position: absolute;

  -webkit-animation-name: easter;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay:1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: reverse;
  animation-name: easter;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay:1s;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

@-webkit-keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

 <div>
hi
</div>

Ответ №3:

Дополнительная информация к ответу @Hien Nguyen, я бы посоветовал вам использовать следующий синтаксис при использовании анимации и работе с @keyframes , чтобы повысить совместимость браузеров:

 /* Safari 4.0 - 8.0 */
@-webkit-keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

/* Standard syntax */
@keyframes easter {
  from {top: 0px;}
  to {top: 200px;}
}

Вместо:

 @-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}