кодесурса
«HTML

Свойства CSS: Как заставить элемент двигаться постепенно вниз?

script1adsense2code
script1adsense3code

Перейти на страницу упражнений

Решение:

HTML-код:

<!DOCTYPE html>
<html>
<head>
<title>How to make an element move gradually down</title>
<style type="text/css">
div{
  width: 120px;
  height: 120px;
  background: #CC63FF;
  position :relative;
  -webkit-animation: mymove 5s infinite;
  animation: mymove 5s infinite;
}
@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  75%  {top: 50px}
  100% {top: 100px;}
}
</style>
</head>
<body>
<p><strong>w3resource Tutorial</strong></p>
<div>@keyframe</div>
</body>
</html>

Демонстрация в реальном времени:

См. Ответ ключевого кадра пера от w3resource ( @ w3resource ) в CodePen .


Посмотреть решение в браузере

Поддерживаемый браузер

«Opera«Интернет
да да да да да

Перейти на страницу упражнений

Каков уровень сложности этого упражнения?

Новый контент: Composer: менеджер зависимостей для PHP , R программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code