CSS анимации

19.09.2018

CSS правило @keyframes

Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.

CSS

animation: turning 2s ease-out 1s infinite alternate;

Структура @keyframes

@keyframes turning {
    0% {
        border-radius: 0 0 0 0;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 50% 0 0 0;
        transform: rotate(45deg);
    }
    50% {
        border-radius: 50% 50% 0 0;
        transform: rotate(90deg);
    }
    75% {
        border-radius: 50% 50% 50% 0;
        transform: rotate(135deg);
    }
    100% {
        border-radius: 50% 50% 50% 50%;
        transform: rotate(180deg);
    }
}

See the Pen Animation CSS Base Example by Denis (@deniscreative) on CodePen.0

Составное свойство «animation» можно разделить на несколько отдельных свойств:

animation-name Название анимации, к которому происходит обращение из @keyframes
animation-duration Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms)
animation-timing-function Временная функция, динамика движения объекта или изменения свойства (ease — (по-умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear — анимация происходит равномерно; ease-in — начинается медленно и ускоряется к последнему ключевому кадру; ease-out — начинается быстро и плавно замедляется вконце; ease-in-out — медленно начинается и медленно заканчивается)
animation-delay Время задержки анимации ДО старта. Также задаётся в секундах или миллисекундах
animation-iteration-count Количество повторов (итерации) анимации (infinite — бесконечно, или можно задать простое число без единиц измерения)
animation-direction Направление анимации, последовательно, вспять или «туда-обратно» (normal — (по-умолчанию) анимация проигрывается от начала до конца и останавливается; alternate — проигрывается от начала до конца и в обратном направлении; alternate-reverse — проигрывается с конца до начала и обратно; reverse — анимация проигрывается с конца.)
animation-play-state Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на :hover или из функции JS при необходимости
animation-fill-mode Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации
но более полезно значениеforwards, которое после окончания анимации, остановится на последнем ее шаге

Видео

Link — https://webdesign-master.ru/blog/html-css/2017-08-01-css-animation.html

Полезная инфа:

Оставить комментарий