Как создать анимацию ключевых кадров CSS

Как создать анимацию ключевых кадров CSS

CSS дает разработчикам возможность оживить свои веб-страницы с помощью анимации по ключевым кадрам.





CSS-анимация достигается изменением начального состояния элемента HTML с помощью его различных свойств. Некоторые общие свойства CSS, которые можно анимировать, включают:



как отформатировать USB-накопитель
  • Ширина
  • Рост
  • Позиция
  • Цвет
  • Непрозрачность

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





Что такое элемент ключевых кадров?

В элемент ключевых кадров может использоваться с одним или несколькими HTML-элементами, к которым у него есть доступ. Он определяет конкретную точку в состоянии элемента и определяет внешний вид, который этот элемент должен иметь в данный момент.

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



Пример структуры ключевых кадров


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Допустим, вы хотите оживить зеленую прямоугольную кнопку, превратив ее в синюю круглую кнопку.

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



Если вы думаете, это не слишком похоже на анимацию. Это потому, что ключевой компонент всего этого процесса еще не введен - этот компонент является свойством анимации.

Свойство анимации

В свойство анимации имеет набор различных подсвойств; они используются в сочетании со структурой ключевых кадров, приведенной выше, для анимации желаемого элемента HTML.



Однако вам нужно знать только пять из этих подсвойств и связанные с ними значения, чтобы добиться анимации в ваших проектах. Эти свойства известны как:

  • Название анимации
  • Продолжительность анимации
  • Анимация-временная функция
  • Анимация-задержка
  • Количество итераций анимации

Использование анимации на веб-странице

Используя описанный выше сценарий, цель - создать анимированную кнопку.

Пример анимации кнопки







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


Раздел анимации в приведенном выше коде содержит пять подсвойств, упомянутых ранее. У каждого свойства есть очень отличная функция, и вместе они работают над анимацией любого HTML-элемента, на который они настроены.

Связанный: Как настроить таргетинг на часть веб-страницы с помощью селекторов CSS

Свойство Animation-name

Это свойство является самым важным в списке. Без свойство animation-name , у вас не будет идентификатора, который можно было бы передать в элемент ключевых кадров , делая весь код в пределах его параметров бесполезным.

Если вы забыли включить одно или два других вспомогательных свойства, у вас все равно может быть довольно приличная анимация. Однако, если вы забыли свойство animation-name у вас не было бы анимации.

Свойство длительности анимации

Это свойство используется для определения количества времени, которое должен занять анимированный элемент при переходе от одного состояния к другому.

В приведенном выше примере свойство animation-duration установлен на 5 секунд (5 секунд), поэтому зеленая прямоугольная кнопка будет иметь в общей сложности 5 секунд, прежде чем она полностью станет синей круглой кнопкой.

Свойство Animation-delay

Это свойство важно по одной причине; для полной загрузки некоторых веб-страниц может потребоваться несколько секунд (из-за нескольких различных факторов). Так что свойство animation-delay предотвращает немедленный запуск анимации на тот случай, если веб-странице потребуется некоторое время для загрузки.

В приведенном выше примере свойство animation-delay установлен на 4 секунды, что означает, что анимация не начнется в течение 4 секунд после посещения веб-страницы (что дает веб-странице достаточно времени для загрузки до начала анимации).

Свойство Animation-iteration-count

Это свойство указывает, сколько раз анимированный элемент должен переходить из одного состояния в другое. В свойство animation-iteration-count принимает значения, которые являются словами и числами. Числовое значение может быть любым от 1 и выше, в то время как значение слова обычно бесконечный .

В приведенном выше примере значение счетчика итераций анимации установлен на бесконечный , что означает, что пока веб-страница открыта, свойство кнопки будет непрерывно переходить из одного состояния в другое.

Свойство функции времени анимации

Это свойство определяет движение анимированного элемента при переходе из одного состояния в другое. В свойство анимации-времени-функции обычно присваивается одно из трех значений замедления.

  • Легкость в
  • Легкость
  • Легкость входа

В простота использования используется выше; это медленно переводит анимацию из одного состояния в другое. Если цель состоит в том, чтобы создать медленный переход, когда кнопка трансформируется из зеленого прямоугольника в синий круг, вы должны использовать легкость в использовании . Если бы вам нужен был только медленный переход в противоположном направлении, вы бы использовали стоимость облегчения .

Сокращение нашего кодекса

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

Приведенный выше код можно сократить на четыре строки. Этого можно достичь, просто используя свойство анимации без явной идентификации каждого из его подсвойств.

Уменьшение кода для примера анимации кнопки







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}