Како играти више ЦСС анимација у исто време?

Овај чланак показује практичну демонстрацију за репродукцију/додавање више ЦСС анимација у исто време.

Како играти више ЦСС анимација у исто време?

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

Следите процедуру у наставку да бисте репродуковали/додали више од једне анимације у исто време.

Корак 1: Креирање структуре

Прво направите ХТМЛ елемент у коме ће се анимације примењивати у наредним корацима. На пример, слика ће бити уметнута:

У горњем исечку кода:

• Прво, путања слике је подешена на „ срц ” атрибут.
• Затим, вредност „ 100пк ” се пружа ЦСС својствима „видтх” и „хеигхт”.
• Такође, подесите вредност „ анимирати ' до ' класа ” атрибут.

Корак 2: Подешавање анимација

„ кључни кадрови ” се користе за креирање прилагођених анимација у складу са потребама веб странице. На пример, две анимације су креиране у исечку кода испод:

У горњем исечку кода:

• Прво, „ @-вебкит-кеифрамес “ механизам се користи за постављање “ завртети ' и ' ротирати ” именоване анимације.
• Затим користите „ преобразити ” својство које има вредност „ ротирати() ” у „ завртети ” тело анимације. Ова функција ротира елемент под углом од “ 180дег ”.
• Након тога, подесите анимацију која расте или проширује оригинални елемент за фактор „ 1 ” у оба „ Икс ' и ' И ” оса у “ Скала ” тело анимације.

Корак 3: Примена анимације на ХТМЛ елементе

Унутар ЦСС дела изаберите класу „ анимирати ” који је додељен „ <имг> ” и обезбедите следећа ЦСС својства:

Опис својстава која се користе у горњем блоку кода:

• Прво поставите вредност „ апсолутна ” у ЦСС “ положај ' имовина. Усклађује „ имг ” елемент према анимацији.
• Затим наведите вредности „ 60% ”, “ 110пк ' и ' 110пк ” у ЦСС “ лево ”, “ ширина ' и ' висина ” својства. Ова својства се користе за постављање положаја и величине елемента.
• Након тога, поставите вредност ' скала 3с бесконачна линеарна ' до ' -вебкит-аниматион ” ЦСС својство.
• И „ 3с ” је трајање те анимације, „ бесконачан ” је трајање анимације, а „ линеарни ” је правац анимације.
• На крају, наведите вредности „ спин 2с бесконачно линеарно ” у ЦСС “ -вебкит-аниматион ' имовина. Ово својство додаје другу анимацију под називом „ завртети ' на ' имг ” елемент.

Након компилације горњег кодног блока, анимација изгледа овако:

Горњи гиф илуструје да само „ завртети ” анимација се репродукује на циљаном елементу.

Корак 4: Репродукција више анимација на ХТМЛ елементима

Као иу претходном кораку, само једна анимација је примењена на елемент. То је зато што је више вредности додељено истом „ -вебкит-аниматион ' имовина.

Да бисте решили овај проблем, умотајте циљни елемент другим ХТМЛ елементом. Као што је „ див ” се већ користи као омот у првом кораку, изаберите његов „ спан ” и ажурирајте код као:

У горњем коду:

• У почетку, „ анимирати ” класа остаје иста и из ње се уклања само друга анимација која се поставља у „ спан ' класа.
• Након тога, поставите позицију помоћу „ положај ' и ' топ ” својства.

Након извршења горњег исечка кода, веб страница сада изгледа овако:

Излаз показује да су обе анимације примењене на изабрани ҺТМЛ елемент истовремено.

Закључак

Да бисте применили више ЦСС својстава, омотајте елемент ҺТМЛ елементима и примените анимације на њиһ тако да сваки ҺТМЛ елемент садржи једну анимацију. Пошто својство дете наслеђује анимацију примењену на родитељски ҺТМЛ елемент, вишеструке анимације се примењују без изазивања грешака или двосмислености за компајлер. То је процедура за репродукцију/додавање више од једне ЦСС анимације у исто време.