✅ ХТМЛ5 - Анимације

Преглед садржаја

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

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

анимација:
Сада када знамо доступна својства, погледајмо пример кода за његову анализу:

Пример

Постоји много различитих врста воћа - само преко 500 врста банана постоји. Док додамо безброј врста јабука, поморанџи и другог добро познатог воћа, суочени смо са хиљадама избора.

У овом примеру видимо да је то у време рада : лебдети на елементу ћемо имати кашњење од 100 мс, тада ће анимација имати 500 мс за извођење и понављаће се бесконачан број пута.
Затим видимо да ћемо са именом које смо дали апликацији користити својство @кеифрамес где ћемо вам рећи који ће елементи бити анимирани.
Хајде да видимо како би то требало да изгледа у нашем прегледачу:

ЕНЛАРГЕ

Како видимо да долази до промене позадине елемента, затим боје слова и величине фонта, на крају анимације се враћа у почетно стање и цео овај процес се понавља, што му даје кретање које не постоји уз употребу прелаза.
Овим такође показујемо важност назива анимације јер функционише као идентификатор да би му се могао доделити а @кеифрамес.
Овим завршавамо водич и са овим смо већ у могућности да изводимо основне анимације, како бисмо нашим документима обезбедили више кретања ХТМЛ.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен