Анимате.цсс постоји већ неколико година и морам признати да сам прилично закаснио на забаву. Открио сам га пре само неколико месеци, док сам претраживао мрежу за неке ЦСС водиче за анимацију и открио шта мора бити најбржи и најједноставнији начин анимирања около, Анимате.цсс.
Створио га тип Дан Еден, Анимате.цсс је брз начин да видите како ЦЦС функционише и да покренете неке акције анимације на вашој веб локацији.
Описана као 'Само додај ЦСС анимацију воде' Анимате.цсс помало је забавна са озбиљном страном. Омогућује чак и аматерским веб дизајнерима, као што сам ја, да се брзо упознају са основама ЦСС анимације и креирају једноставне, али ефикасне ефекте за веб локације. Од једног анимираног наслова до више укључених покрета, овај алат то може учинити.
Анимате.цсс
Анимате.цсс је доступан за преузимање са ГитХуб-а и у основи је библиотека једноставних ЦСС ефеката прикупљених на једном месту. Свака анимација је лијепо упакована и спремна за употребу. Све што требате учинити је пронаћи анимацију која вам се свиђа и примијенити класу. То је у ствари све.
Ако не желите да преузмете целокупну библиотеку, има 2500 редова кода. Можете посјетити страницу Анимате.цсс, пронаћи анимацију и кликнути на везу Анимате.цсс. То учитава класу на веб страницу да бисте је копирали и користили како сматрате прикладним.
Лакше је употребити ГитХуб и детаљније проналазити ефекат који тражите.
- Идите на цсс ГитХуб страницу.
- Кликните везу Извор да бисте приступили листи елемената.
- Изаберите врсту ефекта са листе. Одскок је особа која тражи пажњу, зато одаберите везу потражитеља.
- Изаберите боунце.цсс.
- Копирајте код и ставите га на своју страницу да примените анимацију.
Заиста је тако једноставно. Очигледно бисте одабрали различите опције за различите ефекте, али крајњи резултат је исти. Приступ коду неопходном за дизање тешких терета на страници.
Изградња анимираног објекта помоћу Анимате.цсс
Изградити нешто цоол са Анимате.цсс је једноставно. Само је питање пронаћи ЦЦС код и додати га у свој ЦСС. Ако ја то могу, свако може!
Прва опција на страници Анимате.цсс је одскочна, тако да користимо то у овом примеру.
- Налепи ' ' у у вашој табели стилова.
- Пронађите ЦСС за анимацију коју желите и додајте је елементу који желите анимирати. На пример, додајте „ 'да додам тај ефекат одскока у тест, слику или било шта друго.
- Додајте следећи ЦСС код да би све функционисало. Преузето са боунце.цсс горе.
@кеифрамес боунце {
од, 20%, 53%, 80%, до {
анимација-тиминг функција: цубиц-безиер (0.215, 0.610, 0.355, 1.000);
трансформирати: транслате3д (0, 0, 0);
}
40%, 43% {
анимација-тиминг функција: цубиц-безиер (0.755, 0.050, 0.855, 0.060);
трансформирати: транслате3д (0, -30пк, 0);
}
70% {
анимација-тиминг функција: цубиц-безиер (0.755, 0.050, 0.855, 0.060);
трансформирати: транслате3д (0, -15пк, 0);
}
90% {
трансформисати: транслате3д (0, -4пк, 0);
}
}
.боунце {
анимација-име: одскочити;
порекло трансформације: централно дно;
}
Даљња анимација уз Анимате.цсс
Горња секвенца додаје ефекат напуштања странице када се страница прво учита, што је цоол, али једнократна ствар. Како би било да је додамо лебдећи. На тај начин, кад неко лебди на тесту, одскочи. Нисам нешто што бих радио на продукцијској веб локацији, али је одличан начин да покажем како све функционише.
Додајте следећи код у ЦСС да бисте додали ефекат одскока. Сваки пут када миш пређе преко елемента, требао би одскочити.
.аниматед: ховер {
-вебкит-анимација-трајање: 1с;
-моз-анимација-трајање: 1с;
-мс-анимација-трајање: 1с;
-о-анимација-трајање: 1с;
анимација-трајање: 1с;
-вебкит-аниматион-филл-моде: обоје;
-моз-анимација-филл-моде: оба;
-мс-анимација-филл-моде: обоје;
-о-анимација-филл-моде: обоје;
анимацијски-филл-моде: оба;
}
Ако знате ЦСС, знат ћете пуно боље него ја о томе како имплементирати различите ефекте у различите акције. Као почетник, ова и библиотеке у Анимате.цсс помажу ми да створим основне, али ефикасне анимације за моје веб странице.
Не знам колико бих користио на живој веб локацији јер се они увек не слажу превише а мобилни корисници им се уопште не свиђају. Међутим, како је лекција о томе како ЦСС делује и како се може користити за унапређење веба, то је сјајан ресурс. Ја сам само почетник, али чак и да сам провео неколико сати са Анимате.цсс за овај туториал, научио ме јако пуно. Мислим да ћу се играти са тим пуно више пре него што завршим. А што се тебе тиче?
