Запазете или споделете
В това ръководство ще научите за CSS анимации, мощен начин да се изпълнят нещата, които стават все по-популярни, тъй като въвеждането на подкрепа за браузъри. След като прегледахме основите, ние ще създадем един малък пример, който вдъхва живот на площада превърне в кръг:
Въведение в @keyframes и анимации
В непосредствена близост до CSS анимация работа, трябва да се асоциира с @keyframes селектор. Поради това, всички от кода вътре @keyframes постепенно ще се обработват, оригинален стил ще бъде заменен с нов, който се основава на времевите печати.
@keyframes
Тук ние се определят етапите на анимация. Свойства на нашите правила @keyframes:
- ние избрахме името (в този случай tutsFade);
- стъпки на: 0% -100%; от (0%) до (100%);
- CSS стилове: стила, който искаме да приложим на всеки етап.
Горният код ще доведе до промяна в прозрачността на елемента на непрозрачност: 1 до непрозрачност: 0. Всяка от подходите показани по-горе, води до същия резултат.
анимация имот се използва за да предизвика @keyframes вътре селектора CSS. Анимация може да има няколко свойства:
- анимация име. @keyframes име (не забравяйте, ние избрахме tutsFade);
- анимация, продължителност. , Общата дължина на анимацията от начало до край;
- анимация-време-функция. настройва скоростта на анимация (линейна | лекота | лекота в | лесната навън | лекота в изчакване | кубически-Безие);
- анимация забавяне. забавяне преди началото на нашата анимация;
- анимация, повторение-преброяване. анимация брой повторения;
- анимация-посока. Тя ви дава възможност за промяна на посоката на анимация цикъл, от началото до края, или от края към началото, или всички заедно;
- анимация, запълваща режим. определя кои стилове ще бъдат приложени към елемента, когато нашите анимационни серии (няма | напред | назад | двете).
Този код създава мига ефект с една втора забавяне в началото на анимация, с обща продължителност на анимацията в 4 секунди, с алтернативен посока (посока във всеки цикъл се възстановява) и с линеен безкраен цикъл повторение.
Добавянето на разработчиците представки
Докато спецификацията е на етапа на проекта, ние трябва да се използва префиксите на браузъра, за да осигури по-добра подкрепа за браузъри. Използвайте стандартните представки:
- Chrome и Safary: -webkit-
- Firefox: -moz-
- Opera: -О
- Internet Explorer: -ms-
анимационни строителните предприемачи използват представки, както следва:
близо @keyframes:
няколко анимации
Можете да добавите няколко анимации, като се използва запетая като разделител. Да предположим, че искаме да се добави допълнителна ротация в нашия tutsFade елемент. и ние го правим, като обяви още @keyframes и да го направи, за да ни елемент:
Един пример за "анимация квадратни кръг"
Да се създаде проста трансформация на фигурата, анимация → квадрат кръг, като се следват принципите, описани по-горе. Ние ще имаме общо пет етапа, както и на всеки етап ние определяме радиус от корнер, ротация и цвета на фона на нашата елемент. Стига приказки, нека да започнем да пишем код.
Основен елемент
Първо, създаване на маркиране елемент, който ще анимирате. Ние дори няма да се занимавам с имената на класовете, но просто да се използва прост DIV елемент:
След това, с помощта на селектор елемент (Разделение <> ), Запитване за стилове Разделение по подразбиране:
Сега се подготвят @keyframes. което ние наричаме кръга квадрат до. и пет етапа
Ние трябва да задам няколко стилове в рамките на тези етапи, така че нека да започнем от определяне на граничния-радиуса на всеки ъгъл на площада:
В допълнение, ние може да зададете различен фон-цвят за всеки етап.
И това е наистина доста хладно, и нека да завъртите DIV да привлече вниманието.
Използването на анимация
След определяне на нашата анимация "квадрат → кръг" ние трябва да го прилага по отношение на Разделение:
Както можете да видите, тук ние dobavil кратка анимация собственост. където посочената последователност:
- името на анимация (анимация-наименование) - квадратен до кръг;
- дължина анимация (анимация продължителност) - 2s;
- анимация забавяне (анимация забавяне) - 1s;
- броя на повторенията на анимация (анимация-итерация-брой) - безкраен. така че ще продължи вечно;
- посока на анимация (анимация-посока) - заместник. така че ще се играе от началото до края, а след това обратно в началото, а след това отново към края, и т.н.
Използване на функции от време - това е готино
Последната стойност, която можем да добавим към собственост на анимация - е анимация, графика функция. Това ще определи скоростта, ускорението и забавянето на движението. Тази функция може да отнеме доста подробно стойност, която е неудобно да се брои ръчно, но има и много безплатни сайтове, които предоставят ресурси и живеят корекция за времето анимация функции.
Един такъв инструмент е CSS Облекчаване Анимация Tool. така че нека да го използвате, за да се изчисли нашата функция на времето.
Бих искал да добавя ефект на гъвкавостта на нашата анимация квадрат до кръг, като се използва функция на кубичен кривата на Безие.
След като свири с ръцете и формиране на някакъв вид крива на Безие, актуализирайте стойността на функциите време на анимация, с помощта на предоставения кодов фрагмент.
Крайният кода без да се използват префикси разработчици (... -webkit- -moz- -ms--о) е както следва:
И на последно място
В съвременните браузъри тя работи добре, но Firefox има гаден навик оказване на преобразуващите се обекти в лошо качество. Обърнете внимание на тези назъбени линии, за да разберете какво имам предвид:
За щастие, за това има временно решение. Добавете следния към Разделение прозрачен контур и Firefox ще направи всичко перфектно!
заключение
Това е! Ние използвахме CSS анимация синтаксис за създаване на прости, повтарящи анимации.
Подкрепа браузър
За актуална информация относно CSS анимация подкрепа браузъри проверяват Мога ли да използвам. Но по-накратко, е разрешено в следните браузъри: Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+.
Свързани статии