CSS-анимация: Делаем кнопки подвижными

На вещи, которые двигаются, смотреть интереснее, чем на те, которые не двигаются. Я не говорю, что Мона Лиза не прекрасна, но представьте, если бы она тоже двигалась.

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

Пример проекта

Я создал базовую html-страницу со связанной таблицей стилей. Поскольку мы используем CSS только для анимации нашей кнопки, мы не будем беспокоиться о том, чтобы кнопка действительно что-то делала. Здесь нет никаких серверов или скриптов.

Шаг 1: Ключевые кадры

Итак, чтобы анимировать нашу html-кнопку, сначала нам нужно установить ключевые кадры. Ключевые кадры определяют (по крайней мере), как должна выглядеть наша анимация в начале и в конце анимации. Это ключевые кадры, которые необходимы для понимания того, что и как должно измениться.

Вот хорошее мысленное представление ключевых кадров из реальной анимации:

Чтобы определить ключевые кадры, мы начнем с правила keyframes at-rule и дадим имя нашей анимации. Затем мы используем свойства CSS для описания начального и конечного состояния нашей анимации.

Для нашего примера мы назовем наши ключевые кадры «расти» (так как это основное название «пустой», потому что наша анимация очень проста и нам не нужно влиять на состояние по умолчанию нашего элемента кнопки. Наш последний ключевой кадр, однако, мы добавим свойство transform и установим масштаб элемента в 1,1 раза больше. Если вы хотите узнать больше о transform, ознакомьтесь с этой документацией.

Шаг 2: Определение стиля анимации

Установив ключевые кадры, мы готовы применить анимацию с помощью свойства animation.

Как и многие другие свойства CSS, свойство animation состоит из других подсвойств, которые можно объединить с помощью сокращения animation.

animation-name

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

Мы установим это имя на ключевые кадры «роста».

animation-duration

Следующий подсвойство определяет, сколько времени должно пройти с момента завершения итерации анимации. Его можно ввести в секундах или миллисекундах.

Наша кнопка должна расти довольно быстро, поэтому мы зададим длительность _____.

animation-timing-function

Это свойство определяет кривые ускорения движения по ключевым кадрам. Можно считать, что это внутренний тайминг анимации. Например, ease-in-out заставляет анимацию начинаться медленно, ускоряться и затем замедляться к концу. linear означает, что анимация будет двигаться с постоянной скоростью. Вы также можете использовать cubic-bezier(), что позволит вам определить пользовательские кривые ускорения. Подробнее об этом здесь

Для примера мы просто используем ease-in-out.

animation-delay

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

Наша кнопка не будет задерживаться, но обратите внимание на этот параметр.

animation-iteration-count

Количество итераций анимации определяет, сколько раз будет воспроизводиться наша анимация. По умолчанию это 1, но мы можем ввести положительное число или «бесконечное».

Пусть наша анимация повторяется бесконечно, установите значение параметра animation-iteration-count равным бесконечности.

animation-direction

Анимация не обязательно должна проходить через ключевые кадры в одном и том же порядке. Анимация может проходить через ключевые кадры в обратном порядке. С помощью подсвойства animation-direction мы можем указать элементу, в каком направлении нужно анимировать.

В сочетании с animation-iteration-count это свойство также влияет на то, как анимация сбрасывается после прохождения итерации. Использование `alternate приведет к тому, что анимация будет запускаться в обратном направлении каждую следующую итерацию.

Именно это мы будем использовать для нашей анимации кнопки.

animation-fill-mode

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

animation-play-state

Состояние воспроизведения может использоваться для управления тем, запущена ли анимация running или paused. Это полезно для управления CSS-анимацией с помощью JavaScript.

Поскольку в нашем примере нет JavaScript, мы можем просто оставить это подсвойство выключенным.

Шаг 3: Применение анимации к элементу

После того как мы определили переменную с подсвойствами, мы можем применить ее к элементу, как и любое другое свойство CSS.

Если вы хотите, чтобы анимация запускалась постоянно (если счетчик animation-iteration-count бесконечен) или просто запускалась при загрузке элемента, то это то, что нужно!

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

Заключение

Ну вот и все! Пульсирующая кнопка.

Вот весь CSS, который мы использовали:

`
.button {
background-color: aqua;
border: 2px solid blue;
border-radius: 5px;
}

@keyframes grow {
от {}
до {transform:scale(1.1)}

}

.button:hover {
анимация: расти 250мс линейная 10мс бесконечная чередование;
}
`

Примечание: Переходы

Существуют также CSS-переходы, которые можно использовать в более простых случаях, например, только для роста или только для уменьшения.

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