CSS Анимации: Оживление Веб-Страниц

Здравствуйте, будущие веб-волшебники! Сегодня мы окунемся в магический мир CSS анимаций. К концу этого учебника вы сможете сделать так, чтобы элементы танцевали по вашим веб-страницам, как цифровой Фред Астэр. Так что надевайте свои виртуальные танцевальные туфли и начнем!

Что такое CSS анимация?

CSS анимация - это как赋予在你的 веб-странице статическим элементам жизнь. Представьте, если бы вы могли сделать так, чтобы кнопка пульсировала при наведении пользователя, или чтобы логотип вращался при загрузке страницы. Это сила CSS анимации! Она позволяет вам изменять значения свойств CSS в течение определенного времени, создавая движение и визуальный интерес без необходимости использования сложного JavaScript или Flash.

Правило @keyframes

Сердце CSS анимации - это правило @keyframes. Здесь вы определяете этапы вашей анимации.

@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

В этом примере мы создали анимацию под названием "bounce". На 0% (в начале) элемент находится в исходном положении. На 50% (в середине анимации) он поднимается на 20 пикселей. На 100% (в конце) он возвращается в исходное положение.

Свойство animation-delay

Иногда вы хотите, чтобы ваша анимация подождала перед началом. Тогда на помощь приходит свойство animation-delay.

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

Этот CSS применит нашу анимацию "bounce" к любому элементу с классом "delayed-bounce". Анимация будет длиться 1 секунду, но она не начнется до тех пор, пока не пройдет 2 секунды после загрузки страницы.

Установка количества итераций анимации

По умолчанию анимации chạy один раз и останавливаются. Но что, если вы хотите, чтобы ваша анимация продолжалась, как Energizer Bunny? Тогда на помощь приходит свойство animation-iteration-count.

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

Теперь наш прыгающий элемент будет продолжать прыгать всегда, или до тех пор, пока пользователь не закроет страницу (что наступит раньшe).

Свойство animation-direction

Иногда вы можете захотеть, чтобы ваша анимация шла назад или alternировала между вперед и назад. Свойство animation-direction позволяет вам сделать это.

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

Это заставит наш элемент continuously прыгать вверх и вниз, как perpetuum mobile (если бы только мы могли использовать это для чистой энергии!).

Свойство animation-timing-function

Свойство animation-timing-function позволяет вам контролировать темп вашей анимации. Это как быть дирижером собственного digital оркестра!

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

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

Установка fill-modes анимации

Свойство animation-fill-mode определяет, как элемент должен выглядеть до и после анимации.

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

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

Краткое свойство анимации

Если вы чувствуете себя перегруженными всеми этими свойствами, не волнуйтесь! CSS предоставляет краткое свойство для установки всех свойств анимации сразу:

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

Эта строка устанавливает имя анимации, продолжительность, функцию timing, задержку, количество итераций, направление и fill-mode. Это как швейцарский армейский нож для CSS анимации!

Список свойств CSS анимации

Вот удобная таблица всех свойств CSS анимации, которые мы рассмотрели:

Свойство	Описание
animation-name	Указывает имя анимации @keyframes
animation-duration	Указывает, как долго анимация должна длиться для одного цикла
animation-timing-function	Указывает кривую скорости анимации
animation-delay	Указывает задержку перед началом анимации
animation-iteration-count	Указывает количество раз, которое должна быть воспроизведена анимация
animation-direction	Указывает, следует ли анимации играть в обратном порядке на alterate циклах
animation-fill-mode	Указывает, какие значения применяются анимацией خارج времени ее выполнения
animation	Краткое свойство для установки всех свойств анимации

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

Пока вы практикуетесь, вы найдете, что CSS анимации как готовка - это требует времени, чтобы получить рецепт правильно. Но как только вы это сделаете, вы будете подавать delicious, анимированные веб-опыты, которые оставят ваших пользователей возвращаться за добавкой!

Теперь идите и анимируйте, мои digital Пиксары в обучении. Веб - это ваша холст, и CSS - это ваша кисть. Счастливо анимируйте!

Credits: Image by storyset