Как создать анимацию ключевых кадров CSS
CSS дает разработчикам возможность оживить свои веб-страницы с помощью анимации по ключевым кадрам.
CSS-анимация достигается изменением начального состояния элемента HTML с помощью его различных свойств. Некоторые общие свойства CSS, которые можно анимировать, включают:
- Ширина
- Высота
- Должность
- Цвет
- Непрозрачность
Эти общие свойства 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 */
}
}Допустим, вы хотите оживить зеленую прямоугольную кнопку, превратив ее в синюю круглую кнопку.
В параметрах раздела from выше вам нужно будет разместить все стили, необходимые для того, чтобы элемент выглядел как зеленая прямоугольная кнопка, а затем в разделе до вы разместите все требования к стилю, чтобы превратить эту кнопку в синюю круглую кнопку. .
Если вы думаете: «Это не слишком похоже на анимацию». Ну, это потому, что ключевой компонент всего этого процесса еще не введен – этот компонент является свойством анимации.
Свойство анимации
Свойство анимации имеет набор различных вспомогательных свойств; они используются в сочетании со структурой ключевых кадров, приведенной выше, для анимации желаемого элемента HTML.
Однако вам нужно знать только пять из этих подсвойств и связанные с ними значения, чтобы добиться анимации в ваших проектах. Эти свойства известны как:
- Название анимации
- Продолжительность анимации
- Анимация-временная функция
- Анимация-задержка
- Количество итераций анимации
Использование анимации на веб-странице
Используя описанный выше сценарий, цель – создать анимированную кнопку.
Пример анимации кнопки
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* 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;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page -->
<button class="btn">Click!</button>
</body>
</html>
Раздел анимации в приведенном выше коде содержит пять подсвойств, упомянутых ранее. У каждого свойства есть очень отличная функция, и вместе они работают над анимацией любого HTML-элемента, на который они настроены.
Свойство Animation-name
Это свойство является самым важным в списке. Без свойства animation-name у вас не было бы идентификатора, который можно было бы передать в элемент ключевых кадров , что сделает весь код в его параметрах бесполезным.
Если вы забыли включить одно или два других вспомогательных свойства, у вас все равно может быть довольно приличная анимация. Однако, если вы забыли свойство animation-name, у вас не будет анимации.
Свойство длительности анимации
Это свойство используется для определения количества времени, которое должен занять анимированный элемент при переходе от одного состояния к другому.
В приведенном выше примере для свойства animation-duration установлено значение 5 секунд (5s), поэтому зеленая прямоугольная кнопка будет иметь в общей сложности 5 секунд, прежде чем она полностью станет синей круглой кнопкой.
Свойство Animation-delay
Это свойство важно по одной причине; для полной загрузки некоторых веб-страниц может потребоваться несколько секунд (из-за нескольких различных факторов). Таким образом, свойство animation-delay предотвращает немедленный запуск анимации на тот случай, если веб-странице потребуется некоторое время для загрузки.
В приведенном выше примере для свойства animation-delay установлено значение 4s, что означает, что анимация не начнется раньше, чем через 4 секунды после посещения веб-страницы (что дает веб-странице достаточно времени для загрузки до начала анимации).
Свойство Animation-iteration-count
Это свойство указывает, сколько раз анимированный элемент должен переходить из одного состояния в другое. Свойство animation-iteration-count принимает значения, которые являются словами и числами. Числовое значение может быть любым, от 1 и выше, в то время как словесное значение обычно « бесконечно ».
В приведенном выше примере значение счетчика итераций анимации установлено на « бесконечное », что означает, что пока веб-страница открыта, свойство кнопки будет непрерывно анимироваться из одного состояния в другое.
Свойство функции времени анимации
Это свойство определяет движение анимированного элемента при переходе из одного состояния в другое. Свойству функции-времени-анимации обычно присваивается одно из трех значений замедления.
- Легкость в
- Легкость
- Легкость входа
Выше использовано значение легкости выхода ; это медленно переводит анимацию из одного состояния в другое. Если цель состоит в том, чтобы создать медленный переход, когда кнопка трансформируется из зеленого прямоугольника в синий круг, вы должны использовать значение замедления. Если вам нужен только медленный переход в противоположном направлении, вы должны использовать значение замедления.
Сокращение нашего кодекса
В большинстве случаев сокращение длины программы рассматривается как практический подход. Это главным образом потому, что меньшее количество строк кода снижает вероятность того, что ошибки останутся незамеченными в ваших программах.
Приведенный выше код можно сократить на четыре строки. Этого можно достичь, просто используя свойство анимации без явной идентификации каждого из его подсвойств.
Уменьшение кода для примера анимации кнопки
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
/* 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;
}
}
</style>
</head>
<body>
<!-- placing the button element with the text "Click!" on the web page --
<button class="btn">Click!</button>
</body>
</html>
В приведенном выше коде одна строка кода используется для достижения того же результата, для которого раньше требовалось пять строк кода – именно так вы создаете более чистый код .
Теперь вы можете анимировать свои веб-страницы
Теперь у вас есть навыки, необходимые для анимации любого HTML-элемента на веб-странице. Вы также должны понимать, как свойство анимации и элемент ключевых кадров работают вместе, чтобы сделать возможной анимацию CSS.
Свойство анимации со списком обширных подсвойств, несомненно, интересно. Тем не менее, существует широкий спектр других свойств CSS, которые могут оказаться вам полезными.
Кредит изображения: Джош Ример / Unsplash