Како да се направи добра употреба на CSS3 анимации: Почетен курс, примерочни кодови и примери

Член напишан од:
  • Интернет Дизајн
  • Ажурирано: август 28, 2013

Кога ги користиме JS и jQuery, имаме целосна контрола над анимациите и можеме да создадеме некои неверојатни ефекти, но цената е доста висока. Времето за обработка, компатибилноста на крос-прелистувачот (мобилните уреди, на пример, се сосема различни кога станува збор за JS) и самата сложеност на кодот се точки што треба да ги имаме на ум додека создаваме анимирани интерфејси.

Значи, денес ќе видиме како да го избегнеме JS со користење на CSS анимации и транзиции. Ќе разговараме од многу основни чекори кон некои неверојатни ефекти, како хармоника панели и анимирани подмени.

Земи седиште, не тепих и вистински прелистувач (ништо освен IE) и да почнеме.

Загревање

Имаме неколку предности (и недостатоци како што е сè во нашите животи) при користење на CSS анимации. Ако треба да ги продадете тие на вашиот шеф или клиент, тоа е она што треба да го имате на ум:

  • Тие се потенцијално побрзи, бидејќи тие можат да го користат хардверското забрзување (како имплементации на HTML5)
  • Тие ќе вршат подобро во мобилните уреди и нема да имаат потреба од посебен код за следење на допир
  • JS треба да се толкува од страна на прелистувачот и можностите за раскинување на прелистувачот се многу поголеми. Значи, кога CSS не успее, не успева тивко, додека JS може да ја скрши целата страница
  • Тие имаат доста добра поддршка за прелистувачот (оваа страница ќе ви помогне да проверите одредени статистики за тоа: http://caniuse.com/#search )

Примери на CSS3 анимации

Пред да започнеме со месото од овој пост, да разгледаме неколку убави анимации направени во чист CSS.

Чист CSS Твитер не успеа кит

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

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

Чиста CSS лизгање кокс може
Примери за анимација на CSS 3: Копирање на кола

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

Чиста CSS одење човек

Примери за анимација на CSS 3: Одење човек

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

Прв рацете валкани

Ајде да го започнеме кодот. Ќе користиме многу CSS псевдо класи за активирање на анимацијата. Да бидам искрен, голем дел од програмерите ви препорачуваат да користите JS за активирање и деактивирање на анимации, но тука ќе видиме полесен начин:

#test {позадина: црвено; } #test: hover {позадина: зелена; } #test: активен {позадина: сина; } #test: target {background: black; }

Имаме уште неколку други псевдо-класи за да ги користиме, но имаш идеја! Значи тука е она што се случува ако го кликнете #test елементот (претпоставувајќи дека тоа е врска):

  • Нормална состојба: Позадината ќе биде црвена
  • Лебдиш: Кога глувчето ќе влезе во елемент, ќе има зелена позадина
  • Активен: Кога ќе кликнете на курсорот врз него и додека копчето на глушецот е притиснато, бојата на позадината ќе биде сина
  • Цел: Кога актуелната страница има #test во URL-то овој елемент ќе биде црна

Секој од овие може да се користи за CSS анимации, на пример можете да креирате 2 линкови за да ја активирате и деактивирате CSS анимацијата користејќи го целниот псевдо елемент со овој код:

<a href='#test'> активирај </ a> <a href='#'> деактивира </ a>

CSS транзиции

Транзицијата на CSS ќе се менува од првичната во крајната состојба непречено. Така ќе го дефинирате во главниот селектор користејќи го "транзиционото" својство на времето и на секој имот што ќе биде засегнат и како треба да биде анимацијата. Да видиме пример:

.test {/ * транзиција-времетраење на времетраењето-функција, * / боја: сина; транзиција: боја 2s, големина на фонт 2s олеснување; } .test: лебдат {боја: црвено; } .test: активен {големина на фонтот: 200%; }

Кога го лебдите .test елементот постепено ќе ја менува бојата од сина во црвена боја (каква убава палета, нели?). Кога ќе кликнете на елементот, големината на фонтот постепено ќе се зголемува до 200% од стандардната големина на фонтот.

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

  • Линеарна: Иста брзина од почеток до крај
  • Едноставност: бавен почеток
  • Олеснување: Бавен крај
  • Едноставност: бавен старт, брзо во средината, а потоа бавно крај
  • Лесен-во-out: Бавен почеток, бавен крај
  • Cubic-Bezier (a, b, c, d): Прилагодена брзина

Кубичната Bezier функција ќе создаде сопствена анимација со 4 броеви кои варираат од 0 до 1, претставувајќи ја математичката крива за времетраењето на брзината на анимација X.

За подобра компатибилност на прелистувачот, треба да размислите за користење на префиксите на операторите за опера, Firefox и webkit:

div {ширина: 400px; -o-транзиција: ширина 2s; -моз-транзиција: ширина 2s; -webkit-транзиција: ширина 2s; транзиција: ширина 2s; }

Исто така, можете да ги користите медиумските пребарувања за да дефинирате различни транзиции во зависност од ширината на прелистувачот (мобилни уреди, таблети). Ова е едноставен пример:

тело {font-size: 1em; } @media екран и (макс-ширина: 800px) {body {font-size: 0.8em; }} @media екран и (макс-ширина: 400px) {body {Големина на фонт: 0.7em; }}

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

тело {-o-транзиција: големина на фонтот. 5s линеарна; -moz-транзиција: големина на фонтот .5s линеарна; -webkit-транзиција: големина на фонтот .5s линеарна; транзиција: големина на фонтот .5s линеарна; }

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

CSS анимација - вистинската забава започнува

Анимацијата е низа транзиции дефинирани во еден селектор. За да дефинирате CSS анимации, ќе треба да ги следите чекорите на 2.

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

/ * истиот код за секој продавач * / @ -o-keyframe my-animation {... @ -moz-keyframe my-animation {... @ -webkit-keyframe my-animation {... / * анимација име * / @keyframe my-animation {/ * frame selector * / 0% {/ * frame style * / Left: 0px; Top: 0px; } 25% {Лево: 200px; Top: 0px; } 50% {Лево: 200px; Top: 200px; } 75% {Лево: 0px; Top: 200px; } 100% {Лево: 0px; Top: 0px; }}

Значи, секој стил е дефиниран од рамката / временската рамка (како оние рамки од флеш анимација) како процент и стилови кои треба да се применат таму. Оваа клучна рамка, на пример, вели дека елементот ќе се движи кон лево, потоа врвот, потоа десно, потоа долу.

Откако сте го следеле чекорот 1 и ја создадовте клучната рамка, всушност може да ја примените на елемент. Тогаш ќе ја искористиме скоро истата логика како што сме ја направиле со транзицијата на CSS, разликата е во тоа што сега нашата "транзиција" е многу сложена анимација.

За да го примениме ние ќе го користиме анимационото својство и има под-својства на 7:

  • Име: тој уникатен идентификатор
  • Времетраење: колку време ќе потрае од 0% до 100%
  • Тајмингот-функција: речиси исто како транзициската тајмингова функција
  • Одложување: колку долго ќе потрае за да започне 0%
  • Бројот на итерација: Колку повторувања ќе имаме ("бесконечно" за бесконечна јамка)
  • Насока: нормално или наизменично (обратно)
  • Play-state: ако анимацијата работи или се паузира

Ова ќе ја примени нашата анимација на #test елементот кога е целта на страницата:

#test: целна {/ * анимација-име | времетраење | тајмингот-функција | одложување | повторување на повторување | насока | play-state * / анимација: my-анимација 10s линеарни 0s бесконечно нормално трчање; }

Имајќи го ова на ум, можеме да создадеме неколку страшни примери.

CSS само хармонија

Ние ќе создадеме склопувачки панели користејќи CSS анимации. Еве ја основната структура на HTML:

<div class = "accordion"> <a href="#tab1"> Tab 1 </a> <div id = "tab1"> <p> Текст 1 </ p> </ div> <a href = "# tab2 "> Tab 2 </ div> <div id =" tab2 "> <p> TEXT 2 </ p> </ div> <a href="#tab3"> Tab 3 </ div> tab3 "> <p> Текст 3 </ p> </ div> </ div>

Ова само ќе ги креира панелите и врската што ќе активира секоја од нив. И тука е местото каде што се случува магијата:

/ * било кој дел што е во внатрешноста на хармоника * /. accordion div {/ * е стандардно скриен * / висина: 0; претекување: скриен; / * црна магија * / транзиција: висина 1s; } / * кога споменатиот div е цел * /. accordion div: target {/ * height: auto нема да работи, но ова ќе функционира добро * / висина: 80px; }

Прилично едноставно, нели? И го потрошивте целиот живот со користење на JS за ова? :)

CSS Само Мени со подмени

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

<li> <a href='#item1'> Точка 1 </ a> <ul> li> <li> <a href='#item11'> Точка 1.1 </ li> </ ul> </ div> </ li> <li> <a href='#item12'> Точка 1.2 </ li> <li> <a href='#item2'> Точка 2 </ a> <li> <a href='#item21'> Точка 2.1 </ li> <li> </ li> </ ul> </ div> </ li> </ ul> </ nav>

И волшебникот започнува тука:

a {/ * само што ги прави врските подобар * / display: block; Соочувајќи се: 4px; } nav {текстот-порамнување: центар; } / * секое мени (вклучувајќи го и главниот) * / nav ul {екран: inline-block; листа-стил: нема; } nav> ul> li {/ * хоризонтални предмети (вертикалната ќе работи добро) * / float: лево; } nav li div {/ * колапс на кое било под-мени * / висина: 0; претекување: скриен; / * Худини чувства * / транзиција: висина 1s; } nav li: hover> div {висина: 56px; }

Сумирање

Ова е сигурно само упатство за запознавање. Постојат многу други кул ефекти кои можат да се направат со користење на CSS само анимации и многу работи сигурно допрва треба да дојдат.

Значи, дали сте го користеле ова пред тоа? Можете ли да помислите на уште една добра апликација за CSS анимации? Споделете ги вашите мисли користејќи ги коментарите!

За Рочестер Оливеира

Јас сум веб дизајнер, претприемач од Itajuba (MG), Бразил. Сакам да пишувам за теми нејасни и прави некои кул работи.

Поврзете се: