Свойство CSS animation. Создание анимаций

animation-name — название анимации

Это свойство задает имя анимации, которое связывает элемент с набором ключевых кадров (@keyframes). Именно оно указывает браузеру, какой именно сценарий анимации следует применить к элементу. Без указанного animation-name браузер не будет знать, какие свойства и как анимировать.

Имя анимации вы придумываете сами, руководствуясь смыслом анимации (например, fadeIn, bounce, slideFromLeft). Оно должно состоять из букв, цифр, дефисов или подчеркиваний и не может начинаться с цифры. В коде это имя, указанное в animation-name, должно в точности совпадать с именем, используемым в правиле @keyframes. Можно применять несколько анимаций к одному элементу, перечисляя их названия через запятую.

div {
    animation-name: square;
}
@keyframes square {
    from { background-color: red; }
    to { background-color: blue; }
}

animation-duration — продолжительность анимации

Свойство animation-duration - определяет, сколько времени должен занимать один полный цикл анимации — от начала и до конца. Оно задает "скорость" проигрывания вашего сценария.

Значение указывается в секундах (s) или миллисекундах (ms). Например, 2s или 500ms. Если значение не задано, анимация не произойдет, так как по умолчанию оно равно 0s. Очень важно подбирать длительность анимации вдумчиво: слишком быстрая анимация может остаться незамеченной, а слишком медленная — раздражать пользователя и создавать ощущение "заторможенности" интерфейса. Стандартная длительность для большинства микровзаимодействий лежит в диапазоне от 200 до 500 миллисекунд.

div {
    animation-name: square;
    animation-duration: 0s;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
    }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation-iteration-count — количество повторений анимации

Свойство animation-iteration-count - контролирует, сколько раз анимация будет воспроизведена после своего старта.

Можно задать конкретное целое число (например, 1, 3) или ключевое слово infinite для бесконечного повторения. Значение по умолчанию — 1, что означает однократное проигрывание. Это свойство незаменимо для создания постоянных индикаторов загрузки (infinite), циклических уведомлений или повторяющихся фоновых эффектов. Для тонкого, ненавязчивого привлечения внимания иногда достаточно 2-3 повторений.

div {
    animation-name: square;
    animation-duration: 5s;
    animation-iteration-count: 1;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
        }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation-timing-function — скорость изменения анимации

Пожалуй, одно из самых важных свойств для придания анимации "естественности". Оно определяет, как будет вычисляться скорость анимации в течение одного цикла. Говоря простыми словами, оно отвечает за ускорение и замедление.

div {
    animation-name: square;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
        }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation-direction — направление анимации

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

div {
    animation-name: square;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
        }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation-delay — задержка перед началом анимации

Свойство animation-delay - определяет, сколько времени должно пройти между моментом, когда анимация применяется к элементу (например, загрузка страницы или добавление класса), и моментом, когда она фактически начнет выполняться.

Как и duration, задержка задается в секундах (s) или миллисекундах (ms). Можно использовать отрицательные значения. Если задержка положительная (2s), анимация начнется через 2 секунды. Если отрицательная (-2s), анимация начнется сразу, но как будто она уже шла 2 секунды, то есть с середины цикла. Это полезно для создания каскадных эффектов, когда несколько элементов начинают анимацию с небольшим смещением во времени.

div {
    animation-name: square;
    animation-duration: 5s;
    animation-delay: 0s;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
        }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation-fill-mode — поведение после завершения анимации

Сложное, но критически важное свойство, которое определяет, какие стили применяются к элементу ДО начала анимации и ПОСЛЕ ее завершения. По умолчанию, после завершения анимация "сбрасывается", и элемент возвращается к исходным стилям. animation-fill-mode позволяет это изменить.

div {
    background-color: orange;
    animation-name: square;
    animation-duration: 5s;
    animation-delay: 1s;
    animation-fill-mode: none;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
        }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation-play-state — состояние воспроизведения

Позволяет приостанавливать и возобновлять воспроизведение анимации. Это свойство часто используется в JavaScript для динамического управления анимацией. Например, можно установить animation-play-state: paused при наведении курсора (:hover), чтобы анимация останавливалась, привлекая внимание пользователя к элементу.

div {
    animation-name: square;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes square {
    0% { 
        left: 20px;
        background-color: red;
        }
    100% { 
        left: calc(100% - 170px);
        background-color: blue;
    }
}

animation — универсальное свойство (шорткат)

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

Порядок значений имеет значение. Первыми должны идти name и duration. Остальные значения можно указывать в любом порядке, но два значения времени (duration и delay) всегда интерпретируются так: первое — это duration, второе — delay.

div {
    animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
}
@keyframes square {
    from { background-color: red; }
    to {  background-color: blue; }
}