Како користити ЦСС3 прелазе и анимације за истицање УИ промена

Дизајнери и уметници имају дугу историју експериментисања са покретима, ефектима и различитим врстама илузија са циљем додавања додатног слоја у њихов рад. Покрет оп арта почео је да користи оптичке илузије шездесетих година како би оставио утисак покрета.

Од тада су се појавили новији и новији приступи, као што је недавно популарна кинетичка уметност која проширује перспективу посматрача користећи мултидимензионални покрет. У компјутерској науци се појавио и предлог да се 1967. године изумио први трепћући курсор.

У фронт-енд развоју ДОМ елементи су обично анимирани ЈаваСцрипт-ом пре него што је ЦСС3 објављен, и то је метод који и даље ради, али нове карактеристике које је увео ЦСС3 омогућава нам да побољшамо наше дизајне са различитим ефектима и кретањем на интуитивнији начин.

Две главне технике које ЦСС3 нуди су прелази и анимације. У овом посту ћемо погледати шта су они, каква је разлика између њих и како их можете искористити.

Транситионс

Прелаз и анимације су навикли визуализовати промјене у држави ХТМЛ елемента модификовање једног или више ЦСС својстава.

Најједноставнији облик визуелизације промене стања је промена боје дугмета или везе када је укључен. Када се то догоди, елемент добија мало другачији стил, који гледалац обично примећује као да се нешто померило на екрану.

Промена ЦСС својстава везе на лебдењу (или фокусу или клику) је најстарији и најједноставнији облик прелаза, и постојао је много пре ЦСС3 ере.

 а боја: наранџаста;  а: ховер цолор: ред;  а: фокус боја: плава;  а: висит цолор: греен; 

Транзиције се користе када се ХТМЛ елемент мења из једног предефинисаног стања у други. ЦСС3 је увео нова својства која дозвољавају софистицираније визуализације него раније, као што су функције временског ограничења или контрола трајања.

Ми ћемо погледати нове ЦСС особине у следећем одељку, након што схватимо како се анимације разликују. За сада, да видимо најважније ствари које треба да знате о прелазима.

1. Они увек имају почетак и крај.
2. Стања између почетне и крајње тачке су имплицитно дефинисана од стране претраживача, то не можемо променити са ЦСС-ом.
3. Они захтевају експлицитно активирање, као што је додавање новог псеудокласа од стране ЦСС-а, или нове класе од стране јКуери.

У наставку можете видети леп пример паметно коришћених ЦСС3 прелаза, у којима аутор открива скривене информације на начин који није наметљив, али и даље усмерава фокус корисника на нови садржај.

Аниматионс

Ако желимо да визуализујемо промене стања са сложенијим покретима, или ако немамо експлицитни окидач, нпр. ако желимо да покренемо ефекат када се страница учита, анимације су начин да се крене.

Анимације омогућавају дефинирање сложенијег пута постављањем и конфигурирањем нашег властитог кеифрамес. Кључни оквири су међуточке у току анимације, што нам омогућава да промијенимо стил анимираног елемента онолико пута колико желимо.

Иако ЦСС3 нуди одличне начине за изградњу софистицираних анимација, обично је теже креирати их него пријелазе, зато постоје многе сјајне анимацијске библиотеке које могу олакшати наш рад.

Најважније ствари које треба да знате о ЦСС3 анимацијама су:

1. не захтевају експлицитно покретање, могу почети на учитавању странице или када се други ДОМ догађај одвија у прегледачу
2. могу се користити у случајевима када се користе пријелази, на примјер када се дода или уклони нова класа или псеудоклас (иако је то случај с мање учесталости употребе)
3. они захтевају да дефинишемо неке кључне оквире (средња стања)
4. можемо одредити број, фреквенцију и стил ових кључних кадрова

У примјеру испод можете видјети цоол анимирани падајући изборник. Анимација почиње када кликнемо на дугме. Ово се постиже додавањем додатних класа елементима листе са јКуери када се догоди клик.

Ове нове класе су анимиране са специфицираним @кеифрамес правила у ЦСС датотеци. Додатне класе уклања јКуери када корисник кликне на дугме следећи пут, а мени поново постане скривен.

ЦСС Пропертиес и Тхе @кеифрамес Ат-Руле

За транзиције можемо да користимо или прелаз скраћено својство, или 4 својства везана за једну транзицију: транситион-проперти, трајање транзиције, функција прелазног времена, и кашњење транзиције. Скраћено својство садржи све појединачне особине у скраћеном облику.

За анимације ту је анимација скраћено својство у нашим рукама, што значи не мање од 8 појединачних својстава анимације, наиме аниматион-наме, трајање анимације, анимација-тиминг-функција, анимација-кашњење, број анимације-итерације, правац анимације, аниматион-филл-моде, и аниматион-плаи-стате.

Најважнија ствар са прелазима и анимацијама је да смо увек треба да наведете ЦСС својства која ће бити модификована током промене стања. Са прелазима изгледа овако:

 .елемент позадина: наранџаста; транситион-проперти: бацкгроунд; транзиција-трајање: 3с; функција прелазног времена: олакшавање;  .елемент: ховер позадина: црвена; 

Навели смо позадини имовине, јер ће се то промијенити током транзиције.

Можемо да мењамо више од једне ЦСС особине у једном прелазу, у овом случају горе наведени код би био измењен на следећи начин: транситион-проперти: позадина, граница;. Можемо користити и транситион-проперти: алл;, ако не желимо да специфицирамо сваку имовину одвојено.

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

 .елемент позадина: наранџаста; транзиција: позадина 3с лакоћа;  .елемент: ховер позадина: црвена; 

Ако желимо да направимо анимацију, потребно је да наведемо повезано кеифрамес. ЦСС својства треба да се модификују у засебно дефинисаном @кеифрамес ат-рулес. Ево примера како то можемо да урадимо:

 .елемент поситион: релативе; аниматион-наме: слајд; трајање анимације: 3с; анимација-тиминг-функција: олакшавање;  @кеифрамес слајд 0% лефт: 0;  50% лево: 200пк;  100% лефт: 400пк; 

У горњем примјеру смо створили врло једноставан ефект клизања. Дефинисали смо аниматион-наме, затим везао 3 кључна кадра за који смо навели у @кеифрамес слиде … ат-рулес. Проценти се односе на трајање анимације, тако да се 50% дешава на 1.5с у примеру.

Можемо користити стенографију анимација власништву, или може дефинисати кључне оквире са једноставнијим од до правило на следећи начин:

 .елемент поситион: релативе; анимација: слиде 3с еаси-ин;  @кеифрамес слиде фром лефт: 0;  то лефт: 400пк; 

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

Када правите прелазе и анимације, морате то да знате не могу се анимирати све ЦСС особине, тако да је увек добра идеја да проверите својство које желите да промените у ЦСС Аниматабле.

ЦСС3 анимације и прелази дуго су радили са префиксима добављача, што више не морамо да користимо, међутим, Мозилла Девелопер Нетворк још увек препоручује да додате -вебкит префикс за неко време, јер је подршка за Вебкит базиране прегледнике тек недавно постигла стабилност.