CSS анимации

HTML
19.09.2018
TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

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

TemplateMonster - лучшая коллекция шаблонов для CMS WordPress

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

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