CSS анимации

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

Скролл вверх страницы

Самый простой скролл вверх страницы HTML JS

Анимация элементов в HTML с помощью CSS и JS используя плагин WOW.js

UPD — код для анимации обновлен, из-за обновления структуры Animate.css Используем библиотеку WOW.js документация здесь….

Как убрать желтый (серый) фон при автозаполнении полей формы в браузере Google Chrome

Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения…

Множественные фоны на примере затухающего фона с градиентом и картинкой

Суть задачи — в psd-макете был фон с картинкой и градиентом, который вверху четкий и…

Ответить