Како добро искористити ЦССКСНУМКС анимације: Туториал, примерни кодови и примери

Чланак написао:
  • Сајт Дизајн
  • Ажурирано: Ауг КСНУМКС, КСНУМКС

Када користимо ЈС и јКуери, имамо потпуну контролу над анимацијама и можемо створити неке изванредне ефекте, али цијена је доста висока. Време обраде, компатибилност између читача (мобилни уређаји, на пример, прилично су различити када је у питању ЈС), а сама сложеност кодова су тачке које треба имати у виду приликом креирања анимираних интерфејса.

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

Грабите седиште, бележницу и прави прегледач (све осим ИЕ) и почнемо.

Загревање

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

  • Они су потенцијално бржи, јер могу користити хардверско убрзање (као ХТМЛКСНУМКС имплементације)
  • Они ће боље радити на мобилним уређајима и неће вам бити потребан одређени код за праћење догађаја додира
  • ЈС треба тумачити од стране претраживача и могућности да се прекине прегледач су много веће. Дакле, када ЦСС не успије, то не успије, док ЈС мо'е сломити целу страницу
  • Они имају прилично добру подршку за претраживач (ова страница ће вам помоћи да проверите одређене статистичке податке о томе: http://caniuse.com/#search )

Примери ЦССКСНУМКС анимација

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

Пуре ЦСС Твиттер Фаил Вхале

Анимирани неуспели кит

Направио Стевен Деннис, види то у акцији.

Пуре ЦСС Сцроллинг Цоке Цан
Примери анимације ЦСС КСНУМКС-а: скроловање кокса

Направио Роман Цортес, види то у акцији.

Пуре ЦСС Валкинг Ман

Примери анимације ЦСС КСНУМКС: Валкинг Ман

Направио Андрев Хоиер, види то у акцији.

Прљави руке

Покренемо код. Користићемо пуно ЦСС псеудо класе за покретање анимације. Да будем искрен, многи програмери препоручују вам да користите ЈС да бисте активирали и деактивирали анимације, али овде ћемо видети лакши начин:

#тест {бацкгроунд: ред; } #тест: ховер {бацкгроунд: греен; } #тест: ацтиве {бацкгроунд: блуе; } #тест: таргет {бацкгроунд: блацк; }

Имамо још неколико псеудо-класа за употребу, али имате идеју! Ево шта се дешава ако кликнете на #тест елемент (под претпоставком да је то веза):

  • Нормално стање: Позадина ће бити црвена
  • Ховер: Када миш улази у област елемената, имаће зелену позадину
  • Активно: Када притиснете курсор на њему и док је тастер миша још притиснут, боја позадине ће бити плава
  • Циљ: Када је на тренутној страници #тест у УРЛ-у овај елемент ће бити црн

Свака од њих може се користити за ЦСС анимације, на пример, можете креирати КСНУМКС везе да бисте активирали и деактивирали ЦСС анимацију користећи циљани псеудо елемент са овим кодом:

<а хреф='#тест'> активирајте </а> <а хреф='#'> деактивирајте </а>

ЦСС Транситионс

ЦСС транзиција ће се променити од почетног до крајњег стања без проблема. Тако ћете у главном селектору дефинисати помоћу "транзиције" својства времена и сваке особине на коју ће бити погођено и како би требало да буде анимација. Да видимо пример:

.тест {/ * транситион-проперти тиминг-фунцтион, * / цолор: блуе; прелаз: колор КСНУМКСс, величина фонта КСНУМКСс олакшава; } .тест: ховер {боја: црвена; } .тест: активно {фонт-сизе: КСНУМКС%; }

Када лебдите на .тест елементу, постепено ће се променити боје од плаве до црвене (каква лепа палета, а?). Када кликнете на елемент, величина фонта ће се постепено повећавати на КСНУМКС% од подразумеване величине фонта.

Имамо и својство "транзитног времена", које је постављено као олакшање, како ће се потрошити "време" за анимацију. Ево могућих вредности:

  • Линеарно: Иста брзина од почетка до краја
  • Једноставност: Споро старт
  • Усклађивање: Спори крај
  • Једноставно: Споро старт, брзо у средини, а онда спор
  • Усклађивање: лагани почетак, спор
  • Цубиц-безиер (а, б, ц, д): Прилагођена брзина

Функција кубне Безиер ће креирати прилагођену анимацију са бројевима КСНУМКС-а који варирају од КСНУМКС-а до КСНУМКС-а, представљају математичку криву за вријеме трајања анимације брзине Кс.

Ради бољег компатибилности читача, требало би размислити о кориштењу префикса произвођача за оперу, Фирефок и вебкит овако:

див {видтх: КСНУМКСпк; -о-транзиција: ширина КСНУМКСс; -моз-транситион: ширина КСНУМКСс; -вебкит-транситион: ширина КСНУМКСс; транзиција: ширина КСНУМКСс; }

Такође, можете користити медијске упите да дефинишете различите прелазке у зависности од ширине претраживача (мобилних уређаја, таблета). Ово је једноставан пример:

боди {фонт-сизе: КСНУМКСем; } @медиа екран и (мак-видтх: КСНУМКСпк) {боди {фонт-сизе: КСНУМКСем; }} @ медиа сцреен и (мак-видтх: КСНУМКСпк) {боди {Фонт-сизе: КСНУМКСем; }}

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

боди {-о-транситион: фонт-сизе .КСНУМКСс линеар; -моз-транситион: фонт-сизе .КСНУМКСс линеар; -вебкит-транситион: фонт-сизе .КСНУМКСс линеар; транзиција: фонт-сизе .КСНУМКСс линеар; }

Ово можете користити и ако имате различите приказе или величине за портрет / пејзаж, ако желите да промените ширину, боје, паддингс, приказ менија.

ЦСС анимација - почиње стварна забава

Анимација је низ прелазака дефинисаних у једном селектору. Да бисте дефинисали ЦСС анимације, морате пратити кораке КСНУМКС.

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

/ * исти код за сваког продавца * / @ -о-кеифраме моја-анимација {... @ -моз-кеифраме ми-аниматион {... @ -вебкит-кеифраме ми-аниматион {... / * име анимације * / @кеифраме ми-аниматион {/ * селектор оквира * / КСНУМКС% {/ * фраме стиле * / Лефт: КСНУМКСпк; Топ: КСНУМКСпк; } КСНУМКС% {Лефт: КСНУМКСпк; Топ: КСНУМКСпк; } КСНУМКС% {Лефт: КСНУМКСпк; Топ: КСНУМКСпк; } КСНУМКС% {Лефт: КСНУМКСпк; Топ: КСНУМКСпк; } КСНУМКС% {Лефт: КСНУМКСпк; Топ: КСНУМКСпк; }}

Дакле, сваки стил је дефинисан оквиром / временским оквиром (попут оних оквира из флеш анимације) као процента и стилова који би требало да се примене тамо. Овај кључни оквир, на примјер, каже да ће се елемент помјерати лијево, а затим врх, затим десно, а затим доњи.

Након што сте пратили корак КСНУМКС и креирали свој кључни оквир, можете га примијенити на елемент. Затим ћемо користити прилично исту логику као што смо урадили са ЦСС транзицијом, разлика је у томе што је сада наша "транзиција" сложена анимација.

Да је применимо користићемо својство анимације и има подврсте КСНУМКС:

  • Име: тај јединствени идентификатор
  • Трајање: колико ће трајати од КСНУМКС% до КСНУМКС%
  • Тиминг-функција: прилично исто као функција транзитног времена
  • Кашњење: Колико ће времена трајати за покретање КСНУМКС%
  • Бројање итерације: Колико понављања имамо ("бесконачна" за бесконачну петљу)
  • Смер: нормално или алтернативно (уназад)
  • Плаи-стате: ако се анимација покреће или паузира

Ово ће примијенити нашу анимацију у #тест елемент када је циљ странице:

#тест: таргет {/ * аниматион-наме | дуратион | функција времена | кашњење | број итерација | смер | плаи-стате * / анимација: ми-аниматион КСНУМКСс линеарни КСНУМКСс бесконачно нормално трчање; }

Имајући ово на уму, можемо направити неколико одличних примера.

ЦСС само хармоника

Креиралићемо колапсе које користе ЦСС анимације. Ево основне ХТМЛ структуре:

<див цласс = "хармоника"> <а хреф="#табКСНУМКС"> Таб КСНУМКС </а> <див ид = "табКСНУМКС"> <п> ТЕКСТ КСНУМКС </п> </див> <а хреф = "# табКСНУМКС "> Таб КСНУМКС </а> <див ид =" табКСНУМКС "> <п> ТЕКСТ КСНУМКС </п> </див> <а хреф="#табКСНУМКС"> Таб КСНУМКС </а> <див ид =" табКСНУМКС "> <п> ТЕКСТ КСНУМКС </п> </див> </див>

Ово ће само створити панеле и линк који ће покренути сваку од њих. А ево тамо где се магија дешава:

/ * било који див који је унутар хармоника * / .аццордион див {/ * је скривен по дефаулту * / хеигхт: КСНУМКС; оверфлов: хидден; / * црна магија * / транзиција: висина КСНУМКСс; } / * када је споменути див циљни * / .аццордион див: таргет {/ * хеигхт: ауто неће радити, али то ће радити добро * / хеигхт: КСНУМКСпк; }

Прилично једноставно, а? А ти си провела цео живот користећи ЈС за ово? :)

ЦСС само мени са подменијима

И ово је још једна једноставна апликација. Сигурно имате навигациони мени на вашем сајту, и често морамо користити неке подменије тамо. Најбољи начин приказивања и сакривања ставки је коришћење јКуери-а, зар не? Па, размислите поново након што тестирате овај код:

<нав> <ул> <ли> <а хреф='#итемКСНУМКС'> Ставка КСНУМКС </а> <див> <ул> <ли> <а хреф='#итемКСНУМКС'> Ставка КСНУМКС </а> </ ли> <ли> <а хреф='#итемКСНУМКС'> Ставка КСНУМКС </а> </ли> </ул></див> </ли> <ли> <а хреф='#итемКСНУМКС'> Ставка КСНУМКС </а> <див> <ул> <ли> <а хреф='#итемКСНУМКС'> Ставка КСНУМКС </а> </ли> <ли> <а хреф='#итемКСНУМКС'> Ставка КСНУМКС </а> </ли> </ул></див> </ли> </ул> </нав>

И чаробњаштво почиње овде:

а {/ * само боље повезује линкове * / дисплаи: блоцк; паддинг: КСНУМКСпк; } нав {тект-алигн: центар; } / * било који мени (укључујући главни) * / нав ул {дисплаи: инлине-блоцк; лист-стиле: нема; } нав> ул> ли {/ * хоризонталне ставке (вертикално ће радити превише) * / флоат: лево; } нав ли див {/ * сажима било који под-мени * / хеигхт: КСНУМКС; оверфлов: хидден; / * Хоудини феелингс * / транситион: хеигхт КСНУМКСс; } нав ли: ховер> див {хеигхт: КСНУМКСпк; }

Резиме

Ово је свакако само водич за почетак. Постоји много других кул ефеката који се могу урадити користећи ЦСС само анимације и пуно ствари које сигурно тек треба доћи.

Значи, да ли сте то већ користили? Да ли можете размислити о још једној добри апликацији за ЦСС анимације? Делите своје мисли помоћу коментара!

О Роцхестеру Оливеири

Ја сам веб дизајнер и предузетник из Итајуба (МГ), Бразил. Волим да пишем о нејасним темама и радим неке цоол ствари.