ЦСС Аниматион: Примери и илустрације

Дизајн локације увек је укључивао видљиво и невидљиво. Први је имплементиран у ХТМЛ / ЦСС формату, други по ЈаваСцрипту (клијентска страна). Одабир разумног омјера значи изабрати оптимално вријеме за покретање веб ресурса.

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

ЦСС Руле Феатурес

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

Постоји много могућности и опција за ревитализацију страница сајта, и уопште није потребно трошити време на развој сопственог јединственог кода, у правилу, то увек укључује ЈаваСцрипт (прегледач, клијентска страна). Укљученост серверске стране (ПХП, Перл, друге платформе) је мање важна, мада у зависности од специфичности задатка, можете радити анимацију из даљине, тј. Са сервера.

ЦСС Аниматион је најбоље рјешење када је потребно направити дизајн брзо, учинковито и модерно уз минимално вријеме:

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

Општа синтакса правила анимације

Правило анимације је само пет (седам) позиција: * -наме, * -дуратион, * -тиминг-фунцтион, * -деге, * -итератион-цоунт, * -дирецтион, * -плаи-стате; где * је име правила - анимација са или без префикса претраживача.

Употреба правила је веома једноставна. Обично се користи један унос линије, раздвајајући вредности са размаком, показујући их горе наведеним редоследом. За вјерност, можете поставити елемент правила по елементу. Ако је потребно, наведите префикс претраживача. У сваком случају, анимација за компатибилност са другим претраживачима и опште перформансе треба да буду исправно тестирани.

Пре него што планирате да користите анимацију, треба да размотрите могућност примене других, једноставнијих правила и идеја: транзиција, трансформација, регуларни гиф, итд.

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

@кеифрамес - оквири анимације

Прво, треба напоменути да се анимација састоји од оквира који су означени редоследом: од, 10%, 20%, ... 80%, до. Овде од и до је почетна и завршна тачка, а између њих можете манипулисати бројевима са било којим кораком, наравно, у разумном износу и разумним границама.

У овом случају, @кеифрамес опацити {...} адресира анимацију на својство непрозирности, које је, као што знате, одговорно за транспарентност садржаја ознаке. Постоји интересантна тачка: сваки оквир анимације мења вредност ове особине, али може да промени вредности других својстава стила на који се примењује:

Прва два корака анимације приказана су овде: од и 10%, остатак се обавља на исти начин. Први корак су оригиналне вредности правила која су релевантна за ову анимацију, а сви следећи садрже модификоване вредности ових правила.

ЦСС Анимација: Специфична синтакса

Правило анимације укључује главне позиције:

• нотација (необавезно име правила);
• трајање једног циклуса;
• привремена функција (линеарна, лакоћа, лакоћа, лакоћа, лакоћа, не-излаз, кубни-безиер);
• одлагање почетка процеса;
• број понављања.

Ове позиције су довољне да добију невероватан ефекат.

Важно је имати на уму да било која ЦСС анимација није синтакса. То је машта која се темељи на идејама клијента или без њих.

Треба имати на уму (у развоју кадрова): говоримо о нацртаном "цртаном филму", свако је то икада радио на страницама књиге, цртајући у угловима фигура, мењајући или мењајући нешто на сваком следећем. Брзо се крећете кроз угао, можете видети покрет.

Недостаци "руком цртане" анимације

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

Из тог једноставног разлога, не треба се уплитати у многострукост правила сваког корака, користити могућност комбиновања једног или другог правила по корак. Све треба увек врло једноставно измислити и још једноставније написати.

Важно је разумети: сврха ЦСС-а је да обезбеди скуп једноставних правила за дизајн страница. Што се мање правила користи за сваки идентификатор или класу, то су мањи идентификатори и класе креирани.

ЦСС анимација је увек ручни рад. Чак и када се користи систем за управљање сајтовима, додавање сајта са анимираним елементом значи да је везан за специфичности подручја примене, ако не говоримо о дугмадима, менијима или имплементацији других традиција.

Стварајући "лепоту" на страници, увек је пожељно имати на уму да ћете морати да је промените.

Тачке и облици апликације за анимацију

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

Користећи једноставну, али оригиналну анимацију логотипа компаније и описе њених главних позиција у послу (роба, услуге, методе набавке, промоције, попусти, итд.), Можете одмах привући новог клијента.

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

Покретање текста на екрану (укључујући и другу верзију његове анимације) је стара, практична идеја, али значајно зависи од обима сајта. Ако то није потребно, боље је да се данас не сећате тога.

Изглед ЦСС анимација је најпрактичнија, једноставна и психолошки тражена идеја. Ако не говорите о оригиналним решењима, када покрет миша може оставити ознаку у прозору претраживача (ознаке + псеудо-класа: ховер), онда је класична опција за означавање производа коју је изабрао клијент, показати производ у раду ... је добро решење.

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

Дугме за анимацију. ЦСС је управо направљен за ово. Још увек није постојао кодер и, у великој мери, чак и ПХП или ЈаваСцрипт програмер (специјализације веома далеко од ЦСС правила) које не би провеле неколико дана да креирају своје ремек-дело са знаковима анимације, или елементом на којем класични , али још увек додирујући Здраво свет, ја сам дугме!

Тема Буттон је дефинитивно занимљива. Међутим, широко распрострањено ширење мобилних и других уређаја на које још није могуће повезати миша, предлаже анимирање теме гумба у оквиру практичне интелигенције.

Најбољи опсег ЦСС-анимације је и даље: име и обим компаније, њене услуге, производи и позиција у односу на клијента.