Как да използвате добре CSS3 анимации: Урок, примерни кодове и примери

Когато използваме JS и jQuery, ние имаме пълен контрол върху анимациите и можем да създадем страхотни ефекти, но цената е доста висока. Време за обработка, съвместимост между браузърите (например мобилните устройства са доста различни, що се отнася до JS) и самата сложност на кода са точки, които трябва да имаме предвид при създаването на анимирани интерфейси.


И така, днес ще видим как да избегнем JS с помощта на CSS Animations and Transitions. Ще обсъдим от най-основните стъпки до страхотни ефекти, като акордеонни панели и анимирани подменюта.

Вземете място, бележника си и истински браузър (всичко освен IE) и нека започнем.

Подгряване

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

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

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

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

Чистият CSS Twitter Fail Whale

Анимиран провален кит

 Създаден от Стивън Денис, вижте това в действие.

Чист CSS Scrolling Coke Can
CSS 3 Примери за анимация: Scrolling Coke Can

Произведено от Роман Кортес, вижте това в действие.

Чистият CSS ходещ човек

CSS 3 Примери за анимация: Ходещият човек

 Произведено от Андрю Хойър, вижте това в действие.

Изцапайте ръцете си

Нека започнем кода Ще използваме много CSS псевдо класове, за да задействаме анимацията. За да бъда честен, много разработчици ви препоръчват да използвате JS за активиране и деактивиране на анимации, но тук ще видим по-лесния начин:

#тест {
фон: червен;
}
#test: задръжте {
фон: зелен;
}
#test: активен {
фон: син;
}
#test: таргет {
фон: черен;
}

Имаме няколко други псевдокласове, които да използваме, но вие имате идеята! Ето какво става, ако щракнете върху елемента #test (ако приемем, че е връзка):

  • Нормално състояние: фонът ще бъде червен
  • Задръжте: Когато мишката влезе в областта на елемента, тя ще има зелен фон
  • Активен: Когато щракнете върху курсора върху него и докато бутонът на мишката все още е натиснат, цветът на фона ще бъде син
  • Цел: Когато текущата страница има #test в URL адреса, този елемент ще бъде черен

Всяка една от тях може да се използва за CSS анимации, например можете да създадете 2 връзки, за да активирате и деактивирате CSS анимацията, като използвате целевия псевдо елемент с този код:

активирате
деактивиране

CSS Преходи

CSS преходът ще се промени плавно от първоначалното към крайното състояние. Така че в главния селектор ще използвате свойството „преход“ времето и всяко свойство, което ще бъде засегнато и как трябва да бъде анимацията. Да видим пример:

.тест {
/ * функция за времетраене на свойството на прехода, * /
цвят: син;
преход: цвят 2s, размер на шрифта 2s лекота;
}
.тест: задръжте {
цвят: червен;
}
.тест: активен {
размер на шрифта: 200%;
}

Когато задържите курсора на .test елемента, той ще промени постепенно цвета от син в червен (каква хубава палитра, а?). Когато щракнете върху елемента, размерът на шрифта постепенно ще се увеличи до 200% от размера на шрифта по подразбиране.

Имаме и свойството „тайминг на прехода“, зададено като лекота, за това как ще се изразходва „времето“, достъпно за анимацията. Ето възможните стойности:

  • Линеен: Една и съща скорост от началото до края
  • Улеснение: Бавен старт
  • Улеснение: Бавен край
  • Лекота: Бавен старт, бърз в средата, а след това бавен край
  • Лесно извеждане: Бавен старт, бавен край
  • Куб-безие (a, b, c, d): персонализирана скорост

Кубичната функция Bezier ще създаде персонализирана анимация с 4 числа, която варира от 0 до 1, представляваща математическата крива за скорост на анимация X продължителност.

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

div {
ширина: 400px;
-o-преход: ширина 2s;
-moz-преход: ширина 2s;
-webkit-преход: ширина 2s;
преход: ширина 2s;
}

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

тяло {
размер на шрифта: 1em;
}
@media екран и (макс. ширина: 800 px) {
тяло {
размер на шрифта: 0.8em;
}
}
@media екран и (макс. ширина: 400 px) {
тяло {
Размер на шрифта: 0.7ем;
}
}

Тук размерът на шрифта ще бъде променен внезапно, когато увеличите ширината на браузъра. Този код ще предотврати това да се случи, като дава много по-плавен преход:

тяло {
-o-преход: размер на шрифта .5s линеен;
-moz-преход: размер на шрифта .5s линеен;
-webkit-преход: размер на шрифта .5s линеен;
преход: размер на шрифта .5s линеен;
}

Можете да използвате това също, ако имате различни дисплеи или размери за портрет / пейзаж, ако искате да промените ширина, цветове, подплънки, дисплей от менюто.

CSS анимация – Истинската забава започва

Анимацията е последователност от преходи, дефинирани в един селектор. За да дефинирате CSS анимации, трябва да следвате 2 стъпки.

Правилото @keyframe се използва за определяне на последователност от анимационни стъпки и се дефинира от уникално име и стилове, които описват как работи тази анимация. Както обикновено ще ни трябват някои префикси на доставчика, като в този пример:

/ * един и същ код за всеки доставчик * /
@ -o-keyframe my-animation { …
@ -moz-keyframe my-animation { …
@ -webkit-keyframe my-animation { …
/ * име на анимация * /
@keyframe my-animation {
/ * избор на кадър * /
0% {
/ * стил на рамката * /
Отляво: 0px;
Най-горе: 0px;
}
25% {
Вляво: 200px;
Най-горе: 0px;
}
50% {
Вляво: 200px;
Най-горе: 200px;
}
75% {
Отляво: 0px;
Най-горе: 200px;
}
100% {
Отляво: 0px;
Най-горе: 0px;
}
}

И така, всеки стил се определя от рамката / времевата рамка (като онези кадри от флаш анимация) като процент и стиловете, които трябва да се прилагат там. Този ключов кадър например казва, че елементът ще се премести отляво, след това отгоре, после надясно, след това отдолу.

След като следвате стъпка 1 и създадете своя ключов кадър, всъщност можете да го приложите към елемент. Тогава ще използваме почти същата логика като тази с CSS прехода, разликата е, че сега нашият „преход“ е много сложна анимация.

За да го приложим, ще използваме свойството за анимация и то има 7 под-свойства:

  • Име: този уникален идентификатор
  • Продължителност: колко време ще отнеме от 0% до 100%
  • Функция за определяне на времето: почти същата като функцията за преход на времето
  • Забавяне: Колко време ще отнеме, за да стартирате 0%
  • Брой итерации: Колко повторения ще имаме („безкрайност“ за безкраен цикъл)
  • Посока: нормална или променлива (обратно)
  • Състояние за възпроизвеждане: ако анимацията работи или е поставена на пауза

Това ще приложи нашата анимация към елемента #test, когато е целта на страницата:

#test: таргет {
/ * анимация-име | продължителност | функция на времето | забавяне | брой итерации | посока | състояние на игра * /
анимация: моята анимация 10s линейна 0s безкрайно нормално движение;
}

Имайки това предвид, можем да създадем няколко страхотни примера.

CSS Само акордеон

Ще създадем сгъваеми панели, използвайки CSS анимациите. Ето основната HTML структура:

Раздел 1

ТЕКСТ 1

Раздел 2

ТЕКСТ 2

Раздел 3

ТЕКСТ 3

Това просто ще създаде панелите и връзката, която ще задейства всеки един от тях. И ето къде се случва магията:

/ * всеки div, който е вътре в акордеона * /
.акордеон div {
/ * е скрита по подразбиране * /
височина: 0;
преливник: скрит;
/ * черната магия * /
преход: височина 1s;
}
/ * когато споменатият div е целта * /
.акордеон div: target {
/ * височина: автоматично няма да работи, но това ще работи добре * /
височина: 80px;
}

Доста просто, а? И сте прекарали целия си живот, използвайки JS за това? :)

CSS меню само с подменюта

И това е още едно доста просто приложение. Със сигурност имате навигационно меню в сайта си и често се налага да използваме някои подменюта там. Най-добрият начин за показване и скриване на елементи е използването на jQuery, нали? Е, помислете отново, след като тествате този код:

  • Точка 1
    • Точка 1.1
    • Точка 1.2
  • Точка 2
    • Точка 2.1
    • Точка 2.2

И вълшебството започва тук:

a {
/ * просто правене на връзките tad по-добре * /
дисплей: блок;
подплънки: 4px;
}
nav {
подравняване на текст: център;
}
/ * всяко меню (включително основното) * /
nav ul {
дисплей: вграден блок;
списък-стил: няма;
}
навигация>ул>li {
/ * хоризонтални елементи (вертикалната също ще работи добре) * /
плувка: вляво;
}
nav li div {
/ * свиване на всяко подменю * /
височина: 0;
преливник: скрит;
/ * Чувства на Худини * /
преход: височина 1s;
}
nav li: задръжте>div {
височина: 56px;
}

Обобщаване

Това със сигурност е само ръководство за стартиране. Има много други страхотни ефекти, които могат да бъдат направени с помощта само на CSS анимации и много неща, които със сигурност тепърва предстоят.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map