CSS АНИМАЦИИ (Изменение цвета и положения фона)


ВВЕДЕНИЕ

Я уже некоторое время изучаю основы CSS, и сегодня я решил поделиться тем, что узнал. В основном я решаю писать в блоге о том, что мне кажется непонятным (это помогает мне лучше понять, почти как самообучение). Мы будем обсуждать CSS-анимации, в основном фокусируясь на цветах фона и позициях.

CSS АНИМАЦИИ

📌 CSS-анимации помогают создавать движущиеся элементы и «анимацию» на вашей веб-странице без использования JavaScript, а в основном с помощью CSS.

Чтобы заставить элемент div (контейнер) перемещаться в разные места веб-страницы и менять цвета, мы должны использовать то, что называется keyframe. CSS стили, заданные внутри правила ключевого кадра, позволят анимации постепенно переходить от текущего стиля к новому стилю в определенное время. Допустим, у нас есть сценарий, в котором мы хотим переместить коробку из одной точки экрана в другую. В то время как коробка перемещается, мы хотим, чтобы цвет менялся в определенное время.

Временные рамки должны быть указаны в ключевом кадре в процентах (это может быть объяснено далее в посте). Именно тогда свойство animation-duration определяет, сколько времени потребуется для завершения анимации. Понимание свойства animation-duration и ключевых кадров позволит вам менять цвета элементов, а также изменять их позиционирование. Чтобы упростить понимание, просто возьмите свойство animation-duration как время, в течение которого будет длиться анимация (может быть 10 с, 20 с или даже меньше, в зависимости от ваших предпочтений). А ключевой кадр — это свойство, которое указывает боксу менять цвет в определенное время. (Если вы запутались, не стоит. Я собираюсь дать наглядное объяснение)

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: example; /* Standard syntax */
  animation-duration: 4s; /* Standard syntax */
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Вход в полноэкранный режим Выход из полноэкранного режима

Взглянув на блок кода выше, вы увидите там штуковину ‘webkit…’. По сути, это код для safari, потому что некоторые стандартные свойства CSS не работают с браузером safari (ios). Рекомендуется всегда включать его наряду со стандартными свойствами на всякий случай.

Я указал продолжительность анимации в 4 с (секунды). А ключевой кадр имеет некоторые проценты, выровненные по каждому цвету фона. Это означает, что анимация должна длиться 4 секунды.

В течение 4 секунд;

📌При 0% (от 4 секунд, что будет цветом по умолчанию, когда вы запустите код), цвет фона будет красным и будет находиться в левой части экрана (потому что left установлен на 0px).

📌При 25% цвет фона изменится на желтый и будет находиться на 200px слева от поля (это сдвинет поле вправо).

📌При 50% цвет фона изменился бы на синий и переместился бы вниз вправо, так как есть 200px и слева, и сверху.

📌При 75% цвет фона изменится на зеленый и переместится обратно влево вниз, потому что слева теперь 0px, а сверху 200px.

Наконец, при 100% он вернется в исходное положение и цвет. Этот блок кода выше заставит коробку двигаться в четырех углах. Важность ключевых кадров заключается в том, чтобы указать стили, которые вы хотите добавить к анимации.

ЗАКЛЮЧЕНИЕ

Одна вещь, которую вы всегда должны указывать, — это количество секунд, которые займет длительность анимации. И процентное соотношение — это хорошо (в ключевом кадре). Это связано с тем, что значение по умолчанию всегда равно нулю (0), поэтому если вы забудете указать точное время, которое должна длиться анимация, она не будет иметь никакого эффекта. Спасибо за прочтение!

Оцените статью
devanswers.ru
Добавить комментарий