Как да използваме CSS3 преходи и анимации за маркиране на промените в потребителския интерфейс

Дизайнерите и художниците имат дълга история на експериментиране с движения, ефекти и различни видове илюзии с цел добавяне на допълнителен слой към тяхната работа. Оптичното движение започва да използва оптични илюзии през 60-те години, за да създаде впечатление за движение.

Оттогава се появиха по-нови и по-нови подходи, като напоследък популярното кинетично изкуство, което разширява гледната точка на зрителя, използвайки многоизмерно движение. Предложението се появява и в компютърните науки с изобретяването на първия мигащ курсор през 1967 година.

В front-end разработката DOM елементи обикновено са анимирани от JavaScript, преди CSS3 да бъде освободен, и това е метод, който все още работи, но Новите свойства, въведени от CSS3, ни позволяват да подобрим нашите проекти с различни ефекти и движения по по-интуитивен начин.

Двете основни техники, които CSS3 предлага, са преходи и анимации. В този пост ще разгледаме какви са те, каква е разликата между тях и как можете да ги използвате.

Преходите

И двете преходи и анимации са свикнали визуализирайте промените в държавата на HTML елемент от модифициране на една или повече CSS свойства.

Най-простата форма на визуализация на промяната на състоянието променя цвета на бутон или връзка, когато е включен. Когато това се случи, елементът получава малко по-различен стил, който обикновено се забелязва от зрителя, сякаш нещо се е преместило на екрана.

Промяната на CSS свойствата на връзката при навъртане (или фокус, или щракване) е най-старата и най-проста форма на преходи и тя е съществувала доста преди ерата на CSS3.

 a цвят: оранжев;  a: hover цвят: червен;  a: focus цвят: син;  a: посетен цвят: зелен; 

Преходите се използват, когато HTML елемент се променя от едно предварително дефинирано състояние в друго. CSS3 въвежда нови свойства, които позволяват по-сложни визуализации, отколкото преди, като функции за време или контрол на продължителността.

Ще разгледаме новите свойства на CSS в следващия раздел, след като разберем как се различават анимациите. За сега нека видим най-важните неща, които трябва да знаете за преходите.

1. Те винаги имат начало и край.
2. Състоянията между началната и крайната точка се имплицитно дефинират от браузъра, не можем да променим това с CSS.
3. Те изискват явно задействане, като добавяне на нов псевдоклас от CSS, или нов клас от jQuery.

По-долу можете да видите красив пример за умело използвани преходи на CSS3, в които авторът разкрива скрита информация по начин, който не е натрапчив, но все още насочва фокуса на потребителите към новото съдържание.

Анимации

Ако искаме да визуализираме промени в състоянието с по-сложни движения, или ако нямаме явен тригер, напр. ако искаме да стартираме ефекта, когато страницата се зареди, анимациите са пътят.

Анимациите позволяват да се дефинира по-сложен път, като се зададат и конфигурират нашите ключови кадри. ключови кадри са междинни точки в хода на анимацията, което ни позволява да променяме стила на анимирания елемент колкото пъти искаме.

Въпреки че CSS3 предлага чудесни начини за изграждане на сложни анимации, обикновено е по-трудно да ги създадете, отколкото преходите, затова там има много велики анимационни библиотеки, които могат да улеснят работата ни.

Най-важните неща, които трябва да знаете за анимациите в CSS3, включват:

1. те не изискват изрично задействане, те могат да стартират при зареждане на страницата или когато друго събитие на DOM се извърши в браузъра
2. те могат да се използват в случаите, когато се използват преходи, например когато се добавя или премахва нов клас или псевдоклас (макар че това е по-рядък случай на използване)
3. те изискват да дефинираме някои ключови кадри (междинни държави)
4. можем да определим броя, честотата и стила на тези ключови кадри

В примера по-долу можете да видите страхотно анимирано падащо меню. Анимацията започва, когато кликнем върху бутона. Това се постига чрез добавяне на допълнителни класове към елементите на списъка с jQuery, когато се случи събитие за кликване.

Тези нови класове се анимират с посочените @keyframes правила в CSS файла. Допълнителните класове се премахват от jQuery, когато потребителят кликне върху бутона следващия път и менюто отново се скрива.

CSS Properties и The @keyframes По-правило

За преходите можем да използваме или преход кратко описание, или 4 единични свойства, свързани с преход: преход-имот, преходен продължителност, преходен времето функция, и преходен забавяне. Структурното свойство съдържа всички единични свойства в съкратена форма.

За анимации има анимация кратковременно свойство в ръцете ни, което означава не по-малко от 8 единични анимационни свойства, а именно анимация име, анимация продължителност, анимация-време-функция, анимация забавяне, анимация, повторение-броене, анимация посока, анимация попълване режим, и анимация игра състояние.

Най-важното нещо с преходите и анимациите е, че ние винаги трябва да посочите свойствата на CSS, които ще бъдат модифицирани по време на промяната на състоянието. С преходи изглежда така:

 .елемент фон: оранжев; transition-property: фон; преход-продължителност: 3s; функция за преходно-времева: лекота;  .елемент: hover фон: червен; 

Посочихме заден план собственост, защото това е, което ще се промени по време на прехода.

Можем да променим повече от едно CSS свойство в един преход, в този случай горният код ще бъде променен по следния начин: Преходно свойство: фон, граница;. Можем също да използваме transition-property: всички;, ако не искаме да посочваме отделно всеки имот.

Можем да изберем стенограмите преход собственост. Ако го направим, винаги трябва да обърнем внимание на правилния ред на вътрешните свойства (вижте синтаксиса в документите).

 .елемент фон: оранжев; преход: фон 3s лесно;  .елемент: hover фон: червен; 

Ако искаме да създадем анимация, ние трябва да определим свързаното ключови кадри. CSS свойствата трябва да бъдат модифицирани в отделно дефинирани @keyframes най-правила. Ето пример за това как можем да направим това:

 .element position: relative; animation-name: слайд; продължителност на анимацията: 3s; анимация-време-функция: лекота;  @keyframes слайд 0% left: 0;  50% left: 200px;  100% left: 400px; 

В горния пример създадохме много прост ефект на плъзгане. Определихме анимация име, след това се свързват 3 ключови кадри към него, които сме посочили в @keyframes slide … най-правила. Процентите се отнасят до продължителността на анимацията, така че 50% се случват при 1.5s в примера.

Можем да използваме стенограмите анимация собственост, или може да дефинира ключовите кадри с по-простото от до правило по следния начин:

 .element position: relative; анимация: слайд 3s лекота;  @keyframes slide from left: 0;  до left: 400px; 

Създаването на по-сложни анимации е негова собствена форма на изкуство, ако се интересувате, можете да прочетете две от нашите ръководства за анимация за това как да създадете разширена шапка и как да създадете ефект на отскачане.

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

CSS3 анимациите и преходите работят с префиксите на доставчици за дълго време, което не е нужно да използваме повече, но все още мрежата на разработчиците на Mozilla препоръчва да добавите -WebKit префикс за известно време, тъй като поддръжката на браузърите, базирани на Webkit, наскоро постигна стабилност.