Safari CSS анимация, Apple, разработчик на Xcode

CSS анимация

Задаване на свойства на прехода

За да създадете анимиран преход, първо указвате кои CSS свойства трябва да бъдат анимирани, като използвате свойството -webkit-transition-property, което е CSS свойство, което приема други CSS свойства като аргументи. След това задайте продължителността на анимацията, като използвате свойството -webkit-transition-duration.

Следващият пример създава елемент div, който изчезва в продължение на 2 секунди при щракване.

Има две специални свойства на прехода: всички и никакви

-webkit-transition-property: всички;
-webkit-transition-property: няма;

Задаването на свойството за преход на all води до анимиран преход за всички променени свойства на елемента. Задаването му на none отменя анимацията на свойствата на елемента.

За да зададете анимация за множество свойства, предайте няколко параметъра, разделени със запетая -webkit-transition-property и -webkit-transition-duration. Редът на опциите определя как се прилагат опциите за преход. Например списъкът по-долу дефинира преход за цвят на фона от две секунди и преход за непрозрачност от четири секунди.

Използване на функциите за синхронизация

Функциите за синхронизиране позволяват промяна на скоростта на прехода по време на продължителността му. Можете да зададете функцията за време, като използвате свойството -webkit-transition-timing-function. Изберете една от вградените функции за синхронизация: ease, ease-in, ease-out или ease-in-out, или задайте опции за кубичен безие и контрол на преминаване, за да създадете свои собствени функции за синхронизиране. Например, следният фрагмент дефинира преход от 1 секунда, непрозрачността се променя, използвайки функция за улесняване, която започва бавно и след това се ускорява:

С помощта на функцията за синхронизиране cubic-bezier можете например да дефинирате функция, която стартира бавно, ускорява се и след това забавя в края. Функцията на таймера се определя с помощта на крива на Безие от трети ред, която се определя от четири контролни точки, както е показано на фигурата по-долу. Първата и последната точка на прекъсване винаги са зададени на (0,0) и (1,1), така че вие задавате две междинни точки на прекъсване. Точките са посочени с помощта на координати x, y, като x е изразено като част от общата продължителност и y, изразено като част от общата промяна.

Дефиниране на персонализирана функция за време

забавяне на старта

По подразбиране анимацията на прехода започва веднага щом едно от посочените CSS свойства се промени. За да посочите забавянето на прехода след промяната на свойството и началния час на анимацията, използвайте свойството -webkit-transition-delay. Например, следният фрагмент дефинира анимация, която започва 100 ms след промяна на свойството:

Обработка на междинни състояния и събития

Когато се прилага преход към свойствата на елемент, промяната се анимира плавно от старата стойност към новата стойност и стойностите на свойствата се преизчисляват с течение на времето. Следователно получаването на стойността на свойство по време на преход може да върне междинна стойност, текущата стойност на анимацията, а не старата или новата стойност.

Пример: Откриване на събития в края на прехода.

Анимация с ключови кадри

Анимацията на ключови кадри включва следните функции:

Избиране на произволен брой CSS свойства за промяна и дефиниране на точки на времевата линия, които имат специфични състояния.
Анимацията между две конкретни точки се активира автоматично, но може да бъде направлявана,определена функция за време.
Започвате изрично анимацията на ключови кадри.
Един ключов кадър на анимация може да бъде настроен да се повтаря краен брой пъти или да се повтаря ad infinitum, като тече в една и съща посока всеки път или се редува напред и назад.
Анимациите на ключовите кадри могат да бъдат поставени на пауза и възобновени.
Всички елементи в клас могат да бъдат анимирани като част от една анимация.

Създаване на анимация с ключови кадри

Анимацията с ключов кадър има минимум заглавие, продължителност и един или повече ключови кадъра. Ключовият кадър е CSS правило, което се състои от набор от свойства и стойности, свързани с момент във времето.

За да създадете ключов кадър за анимация, изпълнете следните стъпки:

Създайте именуван набор от ключови кадри, като използвате CSS правилото @-webkit-keyframes. Комплектът трябва да включва поне един ключов кадър.
Задайте свойството -webkit-animation-duration на положителна различна от нула стойност.
Задайте свойството -webkit-animation-name на името на набора ключове.

Следващият пример дефинира един ключов кадър в набор с име glow. Ключовият кадър определя синия цвят на фона. Примерът дефинира псевдокласа div:hover като притежаващ анимация, наречена glow с продължителност на анимацията 1 s. Когато задържите или докоснете който и да е div елемент, той става син за една секунда.

Създаване на ключови кадри

Ключовите кадри са посочени в CSS с помощта на правилото @-webkit-keyframes. Правилото се състои от ключовата дума @-webkit-keyframes, след това името на анимацията, след това серия от стилови правила за всеки ключов кадър. Правилата за стил са групирани в блокове във фигурни скоби и всеки се предхожда ототносителна точка във времето (обикновено процент от продължителността на анимацията).

Можете да зададете произволен брой CSS свойства в правило за стил.

Следващият списък показва набор от ключови кадри за анимация, наречени wobble-glow, с ключови кадри, които движат елемент напред и назад, променяйки цвета на фона му с течение на времето. Лявото свойство анимира напред и назад между 75px и 150px, а цветът на фона циклично преминава между червено, бяло и синьо.

Относителният момент във времето се посочва или като процент от продължителността на анимацията, или с ключовата дума от или до. Например 0% показва началото на анимацията, 50% половината от анимацията и 100% края на анимацията. Ключовата дума from съвпада с 0%, а ключовата дума to съвпада със 100%. Докато анимацията работи, тя плавно преминава от едно състояние към следващо във възходящ ред, от 0% до 100%.

Едно от свойствата на CSS, които могат да бъдат посочени в ключовия кадър, е -webkit-animation-timing-function. Това свойство определя скоростта на промяна за анимацията от текущия към следващия ключов кадър. Вижте "Използване на функциите за синхронизация".

Задаване на свойства на анимация

-webkit-animation-iteration-count - Задайте броя на итерациите на анимацията. Стойността по подразбиране е 1. Може да бъде зададено на цяло число или безкрайно.
-webkit-animation-direction - Указва повтарящата се анимация или да действа в същата посока всеки път, или в алтернативни посоки. Може да се настрои на нормален (по подразбиране) или алтернативен. Ако е зададено на алтернативно, анимацията върви напред и назад - от 0% до 100% и от 100% до 0% - при алтернативни итерации. Стойността на webkit-animation-iteration-count трябва да е по-голяма от 1 или това свойство няма да имаефект.
-webkit-animation-play-state - Поставяне на пауза или възобновяване на анимацията. Задайте това свойство на пауза, за да спрете и/или работи (по подразбиране), за да продължите анимацията.
-webkit-animation-delay - Време за изчакване между началото на анимацията и началото на анимацията (по подразбиране 0s).
-webkit-animation-timing-function - Функцията за синхронизация по подразбиране, използвана между ключови кадри. Можете да замените това свойство на базата на ключов кадър, като посочите допълнителни функции за синхронизиране в ключовите кадри.
-webkit-animation-fill-mode = Казва на анимацията да промени стила на елемента преди или след анимацията.

По подразбиране стилът на даден елемент не се променя, когато е ключов кадър, нито преди, нито след анимацията.

Ако е зададено на напред, състоянието в края на анимацията е постоянно.

Ако е зададено на назад, началното състояние на анимацията се прилага по време на забавянето преди началото на анимацията.

Когато е зададено на двете, се прилагат както напред, така и назад.