Введение в CSS-анимации

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

Основные понятия

Переходы (Transitions):

Transition Property: определяет, какие свойства будут анимированы.
Transition Duration: задает продолжительность анимации.
Transition Timing Function: определяет, как анимация будет изменяться во времени.
Transition Delay: задает задержку перед началом анимации.

Ключевые кадры (Keyframes):

Используются для создания более сложных анимаций.
Позволяют определять промежуточные состояния анимации.
Используются с правилом @keyframes.

Анимации (Animations):

Animation Name: имя, заданное для анимации с ключевыми кадрами.
Animation Duration: продолжительность выполнения анимации.
Animation Timing Function: определяет, как анимация будет изменяться во времени.
Animation Delay: задержка перед началом анимации.
Animation Iteration Count: количество повторений анимации.
Animation Direction: направление выполнения анимации.
Animation Fill Mode: определяет, будет ли элемент сохранять стили после завершения анимации.

Примеры

Простой переход

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Переходы</title>
    <style>
        body { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
        }    

        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s ease, transform 0.5s ease;
        }

        .box:hover {
            background-color: red;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

В этом примере background-color и transform меняются при наведении курсора на элемент .box.

Анимация с ключевыми кадрами

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Анимация</title>
    <style>
        body {
            display: flex;            
            justify-content: center;            
            align-items: center;            
            height: 100vh;        
        }
        
        .animated-box {
            width: 100px;
            height: 100px;
            background-color: green;
            animation: moveAndRotate 2s infinite;
        }

        @keyframes moveAndRotate {
            0% {
                transform: translateX(0) rotate(0deg);
                background-color: green;
            }
            50% {
                transform: translateX(100px) rotate(180deg);
                background-color: yellow;
            }
            100% {
                transform: translateX(0) rotate(360deg);
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="animated-box"></div>
</body>
</html>

Здесь используется правило @keyframes, чтобы создать анимацию, в которой элемент .animated-box перемещается и вращается, меняя цвет.

Полезные советы

Плавность: используйте функцию плавности (ease, ease-in, ease-out и т.д.) для естественного эффекта.
Совместимость: убедитесь, что анимации корректно работают в разных браузерах.
Производительность: избегайте сложных анимаций, которые могут сильно нагружать процессор.

В нашем телеграмм канале вы можете предложить тему для следующего мини урока