CSS-анимация: улучшите свой сайт с помощью этих 17 опций

CSS появился на сцене в начале 1990-х и с тех пор эволюционировал от CSS1 до CSS2 и CSS3 — текущей и широко используемой версии. В этой статье мы будем следовать общепринятой практике использования термина «CSS» при упоминании этой последней версии.

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

Строительные блоки CSS-анимации

Анимация CSS использует код CSS для связывания различных свойств и значений, которые заставляют элементы на экране «двигаться».

Свойства CSS — это части анимации, такие как фон, радиус границы, шрифт, поле, тип движения (например, вращение или затухание) и т. д. Значения заполняют детали вокруг этих свойств анимации, определяя цвет, выравнивание, размер, длину. времени, направления, скорости и т.

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

• Свойство animation-nameзадает имя анимации.
• Свойство animation-durationописывает продолжительность анимации. Значения обычно отображаются в секундах (0 с, 4 с и т. д.).
• Свойство animation-delayуказывает отложенный запуск анимации. Его значение также указывается в секундах (-2 с, 5 с и т. д.).
• Свойство animation-iteration-countуказывает, сколько раз должна запускаться анимация. Значение представляет, сколько раз вы хотите, чтобы анимация повторялась; например, infinite-alternateзаставит это продолжаться вечно.
• Свойство animation-directionсообщает, как должна воспроизводиться анимация. Значения включают normal(вперед), reverse, alternateи т. д.
• Свойство animation-timing-functionописывает кривую скорости. Значения включают ease-in-outмягкое начало и конец, cubic-bezierсоздание сложной кривой и т. д.
• Свойство animation-fill-modeопределяет, как выглядит элемент, когда анимация не воспроизводится. Значения включают forwardsсохранение значений, установленных последним ключевым кадром и т. д.

Теперь, чтобы собрать все это вместе! В этом примере из W3Schools , который прикрепляет анимацию (названную «пример») к <div>элементу, вы можете видеть, что элемент представляет собой квадрат со стороной 100 пикселей и имеет красный фон. Когда анимация начнется, она будет продолжаться в течение 4 секунд, пока цвет фона изменится с красного на желтый:

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

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