Анимације на веб страници могу привући више корисника. Запитајте се ово - ако бисте видели веб страницу која има поприлично анимације, не бисте ли желели да истражите више? Сада, са ЦСС прелазима, можете да оживите свој рад помоћу сјајних анимација. И, пазите, ово треба учинити како треба. Истражимо свет ЦСС транзиција следећим редоследом:
- Зашто ЦСС транзиције?
- Прелазно својство
- Шта треба да наведете?
- Својство функције Прелазно-временска функција
- Својство транзиције-одлагања
Зашто ЦСС транзиције?
Идемо на пример. Ако бисте боју елемента променили из беле у плаву, ова промена је готово тренутна. Да бисте имали анимиранији ефекат, можете да омогућите да се ова промена дешава постепено. И ово изгледа прилично визуелно привлачно. Омогућавањем ЦСС прелаза можете прилагодити начин на који се промене јављају. Можете дефинисати како се промене у елементима дешавају у одређеним временским интервалима који прате кривуљу убрзања.
ЦСС прелази вам омогућавају да дефинишете промене за елементи, специфични временски интервали, брзина криве убрзања и још много тога. Све ово можете учинити без употребе Фласх-а или ЈаваСцрипт .
За боље разумевање можете се обратити на доњу слику:
На горњој слици, ХТМЛ елемент ће се променити из црвене у плаву у року од једне секунде. Такође ћете видети средњу боју када се прелазак одвија. Ако нећете да користите ЦСС прелазе, приметићете да је промена боје из црвене у плаву тренутна - нећете видети средњу боју. Код ЦСС прелаза приметићете анимирани ефекат када се ХТМЛ елементи мењају из старог у ново стање.
Прелазно својство
Својство стенографског прелаза можете користити за контролу ЦСС прелаза. Употреба ове скраћенице није само лака, већ такође може да избегне несинхронизоване параметре који могу бити прилично фрустрирајући за отклањање грешака у ЦСС-у.
Својство преласка наводи ЦСС својства на која желите ефекат преласка. Само су ова ЦСС својства анимирана.
Синтакса:
прелаз:
шта је променљиво у јави
Као почетник, можда ћете се суочити са неким потешкоћама у коришћењу стенографије. Ако мислите да је коришћење стенографије тренутно за вас мало сложено, својства прелаза можете одредити одвојено. За ХТМЛ елемент можете одредити својства прелаза једно по једно, као што је приказано у доњем примеру:
див {ширина: 100пк висина: 100пк позадина: лигхтблуе прелаз-својство: ширина-прелаз-трајање: 2с прелаз-време-функција: линеарно прелазак-кашњење: 1с} див: ховер {ширина: 300пк}Пређите курсором преко оквира
У горњем примеру, одвојено смо специфицирали својства (својство преласка, трајање преласка, функција временског прелаза и кашњење преласка) и њихове вредности. О овим својствима преласка сазнаћемо ускоро.
Шта треба да наведете?
Постоје првенствено две ствари које требате навести да бисте креирали ЦСС прелазе: ЦСС својство које жели да дода ефекат и временско трајање тог ефекта.Морате имати на уму једно - када не наведете трајање времена, прелазак ће узети подразумевану вредност од 0 , и неће бити ефекта.
Размотримо пример:
Код у наставку дефинише ефекат преласка својства видтх у трајању од пет секунди.
див {ширина: 100пк висина: 100пк позадина: плави прелаз: ширина 5с} див: ховер {ширина: 600пк}Померите курсор изнад див елемента изнад да бисте видели ефекат преласка.
У горњем коду видећете да када задржите показивач изнад плавог оквира, плави оквир постепено повећава своју ширину у временском трајању од пет секунди. Такође ћете приметити да када уклоните курсор из плавог оквира, плави оквир ће се постепено враћати у своју првобитну величину (не тренутно). Такође можете да промените вредности за ширину и време трајања да бисте видели како ово својство преласка утиче на ХТМЛ елемент.
Такође можете додати ефекат преласка на више својстава. То можете учинити помоћу зареза за одвајање својстава. Размотримо пример:
У доњем коду својство преласка је одређено за ширину, висину и трансформацију.
врсте трансформација у информатици
див {додатак: 15пк ширина: 150пк висина: 100пк позадина: зелена транзиција: ширина 2с, висина 2с, трансформација 2с} див: ховер {ширина: 300пк висина: 200пк трансформација: ротирај (360дег)} Здраво Свете (Задржите показивач изнад мене)
Са горњим примером видећете како се креће зелени оквир када задржите показивач изнад оквира.
Навели смо само својство и време трајања. Да видимо остале параметре на разним примерима.
Својство функције Прелазно-временска функција
Ово својство дефинише криву брзине за ефекат преласка. Може узети следеће вредности:
- Једноставна вредност: Ово је подразумевана вредност где је ефекат на почетку спор, а затим бржи и полако се завршава.
- Линеарна вредност: Овај ефекат не мења брзину прелаза - одржава брзину константном од почетка до краја.
- Једноставна вредност: Овај ефекат започиње полако.
- Једноставна вредност: Овај ефекат се споро завршава.
- Вредност једноставног изласка: Овај ефекат има и спори почетак, али и спори крај.
- Вредност кубног безијеа (н, н, н, н): Можете одредити свој сопствени скуп вредности у функцији кубни-безиер.
Доњи код приказује ефекте прелаза за линеарне, лакоће, лакоће уласка, олакшавања и излажења.
див {ширина: 100пк висина: 100пк позадина: ружичасти прелаз: ширина 2с} # див1 {прелаз-временска-функција: линеарна} # див2 {прелазна-временска-функција: лакоћа} # див3 {прелазна-временска-функција: лакоћа у } # див4 {прелаз-временска-функција: лакоћа-оут} # див5 {прелаз-временска-функција: лакоћа-улазак} див: ховер {ширина: 300пк}Пређите курсором преко див елемената у наставку
линеарно
ублажити, лакоца
лагодност
лагодност
лакоћа уласка
Својство транзиције-одлагања
Понекад желите да се анимација догоди након одређеног времена. Својство прелаза-одлагања омогућава вам да одредите кашњење за ефекат преласка. Кашњење можете одредити у секундама.
Узмимо пример да видимо кашњење ефекта транзиције:
див {ширина: 100пк висина: 100пк позадина: жута транзиција: ширина 3с прелазак-одлагање: 1с} див: ховер {ширина: 300пк}Пређите курсором преко елемента див у наставку
Белешка: Можете приметити то кашњење од 1 секунде пре почетка ефекта
У горњем коду, када курсором задржите показивач изнад жутог оквира, приметићете (на секунду) да нема ефекта. Након сачекане једне секунде, приметићете ефекат.
Овим смо дошли до краја овог чланка о ЦСС транзицијама. Сада можете додати анимације на своје веб странице. Испробајте ове примере.
Погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Обухвата обуку о веб развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да га спомињете у одељку за коментаре блога „ЦСС Транситион“ и јавићемо вам се.