Преглед садржаја
Анимације су ефекти попут прелаза, али побољшани у својој функционалности, у смислу да постоји супериорна контрола над оним што се може учинити, због доступности више могућности за промену из једног стила у други.Својства анимације
Као што смо раније рекли, анимације су побољшани прелази због броја опција и својстава која нам омогућавају већу контролу над њима, прегледаћемо сваку од њих:
- анимација-кашњење: Примените одређено време да бисте могли да покренете анимацију када се активира.
- смер анимације: Одређује да ли би анимација требало да се репродукује уназад или наизменично.
- трајање анимације: Означава временски распон у којем би се анимација требала репродуцирати.
- аниматион-итератион-цоунт: Означава колико се пута анимација мора поновити, па чак може поставити и вриједност бесконачан за бесконачно понављање истог.
- назив анимације: Одређује назив анимације.
- стање анимације-репродукције: Омогућава паузирање анимације, а затим наставак репродукције.
- аниматион-тиминг-фунц: Наведите како се у анимацији треба односити према средњим вредностима
- анимација: То је пречица помоћу које можемо уградити сва својства анимације у једну ЦСС декларацију и има следећу структуру:
Сада када знамо доступна својства, погледајмо пример кода за његову анализу:
ПримерПостоји много различитих врста воћа - само преко 500 врста банана постоји. Док додамо безброј врста јабука, поморанџи и другог добро познатог воћа, суочени смо са хиљадама избора.
У овом примеру видимо да је то у време рада : лебдети на елементу ћемо имати кашњење од 100 мс, тада ће анимација имати 500 мс за извођење и понављаће се бесконачан број пута.
Затим видимо да ћемо са именом које смо дали апликацији користити својство @кеифрамес где ћемо вам рећи који ће елементи бити анимирани.
Хајде да видимо како би то требало да изгледа у нашем прегледачу:
ЕНЛАРГЕ
Овим такође показујемо важност назива анимације јер функционише као идентификатор да би му се могао доделити а @кеифрамес.
Овим завршавамо водич и са овим смо већ у могућности да изводимо основне анимације, како бисмо нашим документима обезбедили више кретања ХТМЛ.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
