Овај чланак показује процес додавања анимација и прелаза у више корака.
Како користити анимације и прелазе у више корака?
Да би се направила анимација у више корака, генерише се низ кључних кадрова. Он одређује низ измена које ће се применити на изабрани ХТМЛ елемент. Сваки кључни кадар представља различито стање анимације, а претраживач глатко прелази елемент између ових стања. Током прелаза, наведите глатку промену ЦСС својстава током одређеног трајања интеракцијама корисника или променама стања.
Хајде да прођемо кроз практичан пример за боље разумевање:
Пример 1: Примена анимације у више корака
У овом примеру, анимација у више корака ће се применити на изабрани ХТМЛ елемент. Посетите демонстрацију испод:
< стил >
.аниматионЕкампле {
ширина: 130пк;
висина: 130пк;
боја позадине: шумскозелена;
положај: релативан;
анимација: мовеАнимате 4с бесконачна лакоћа уласка;
}
< / стил >
< тело >
< див класа = 'пример анимације' >< / див >
< / тело >
У горњем исечку кода:
- Прво, класа под називом „ аниматионЕкампле ” је изабран унутар „ <стиле> ” ознака.
- Затим, вредности „ 130пк ” су додељени „ висина ' и ' ширина ” својства.
- Поред тога, поставите „ шумски зелено ' и ' релативан ” као вредност за „ боја позадине ' и ' положај ” својства за побољшање визуелизације.
- Након тога, користите „ анимација ” својство и поставите га једнако на “ бесконачно бесконачно лако улажење у покретАнимате 4с ” да бисте применили анимације.
- Вредност се састоји од четири дела, први је анимација прилагођеног имена, други је временско трајање довршетка, трећи је тип анимације, а четврти је ограничење колико пута ће се ова анимација применити.
- На крају направите ХТМЛ елемент и доделите „ аниматионЕкампле ” разред томе.
Сада користите „ кључни кадрови ” правило за дефинисање обичаја “ мовеАнимате ” анимација:
@ мовеАнимате кључне кадрове {0 % {
лево: 0 ;
боја позадине: плава;
}
педесет % {
лево: 200пк;
боја позадине: шумскозелена;
трансформисати: ротирати ( 180дег ) ;
}
100 % {
лево: 0 ;
боја позадине: плава;
}
}
У горњем блоку кода:
- Прво, „ @кеифрамес ” блок се креира заједно са именом прилагођене анимације која ће бити дефинисана.
- Затим направите блок под називом „ 0% ” који примењује ЦСС стилове на почетку анимације. И користите „ боја позадине ' и ' лево ” ЦСС својства.
- Сада креирајте блок са именом и „ педесет% ” за стилизовање усред анимације. Он пружа вредности „ 200пк ”, “ шумски зелено ' и ' ротирати (180 степени) ” на својства „лево”, „боја позадине” и „трансформација”. Ово омогућава изабраном елементу да ротира лево за 200 пиксела.
Након компилације горњег кодног блока:
Излаз показује да је анимација у више корака примењена на изабрани ХТМЛ елемент.
Пример 2: Примена транзиције у више корака
Да бисте применили прелаз у више корака, ЦСС селектори се могу користити заједно са „ прелаз ' имовина. Посетите доњи код:
.фаде {
непрозирност: 1;
прелаз: непрозирност 1с;
}
.фаде:ховер {
непрозирност: 0;
}
<
/ стил>
<
тело>
< стр класа = 'бледети' > Задржите показивач изнад мене да видите прелаз. < / стр >
< / тело >
Објашњење горњег кода:
- Прво, обичај „ избледети ” класа је изабрана и вредност 1 је дата у „ непрозирност ' имовина. Такође, подесите вредност „ непрозирност 1с ' до ' прелаз ” ЦСС својство. Ово поставља или уклања непрозирност у временском трајању од „ 1с ”.
- Затим, „ :лебдети ” селектор је додељен „ избледети ' класа. У њему је вредност „ 0 ” је постављен на својство непрозирности.
- На крају, ХТМЛ елемент се креира унутар „ <боди> ” и класа “ избледети ” је приложен уз њега.
Након завршетка фазе компилације, веб страница изгледа овако:
ГИФ приказује да је прилагођени прелаз избледења примењен на изабрани ХТМЛ елемент.
Закључак
Анимације и прелази у више корака оживљавају ХТМЛ веб странице додавањем покрета и визуелних ефеката. За анимацију, „ кључни кадрови ” се користе заједно са процентом трајања као што је „ 0% 'је почетак,' педесет% ” је средина, а “ 100% ” је крај трајања анимације. За прелаз, ЦСС селектор се може користити заједно са „ прелаз ' класа. Овај чланак је демонстрирао процес коришћења анимација и прелаза у више корака.