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
UPD — код для анимации обновлен, из-за обновления структуры Animate.css Используем библиотеку WOW.js документация здесь….
Небольшое уточнение: цвет автозаполненного поля раньше был желтым, но на момент редактирования (16.12.2021) цвет автозаполнения…
Суть задачи — в psd-макете был фон с картинкой и градиентом, который вверху четкий и…