Css анимации бързо и лесно
Научили сме се да ви и споделете го CSS в това хранилище на GitHub: mekentosj / блог витрини-анимации.
HTML5 и CSS3 практика от нула до резултата!
Ето как да форматирате GIF прилича на крайния резултат. Анимация леко се забави за да стане ясно какво се случва:
Ако искате да направите нещо подобно на това, прочетете по-нататък за CSS свойства на реализация. Ние ще ви кажа в подробности за завъртане () и превежда ().
Анимирайте индивидуалните свойства
Първото нещо, което анимирани - се плъзга надолу документи библиотека лого страница. Помислете за своята CSS:
Абсолютно позициониране се използва, за да бъде в състояние да се установи местонахождението на обекта, когато страницата е заредена, а след това се контролира от слайд-библиотека анимация. анимация функция - това намаление, възможност за задаване на множество имоти:
Анимация слайд-библиотека комплект, за да преминете в рамките на 4 секунди при закъснение от 0,5 секунди. Забавяне засилва впечатлението за анимация, което прави по-забележима първоначалното състояние на страницата, както и функцията за синхронизация помага анимацията изглежда по-естествено: лекота означава, че на края на това малко бавно.
Назад към оригинала "doanimatsionnomu" в края на анимацията - това е нормално поведение на елемента. Вариант напред анимация посока позволява на библиотеката, за да се държат здраво на мястото си.
Направи елемент се появи от нищото точно толкова лесно, колкото да го скрие за Разделение, движещи се извън страницата или промяна на непрозрачност. Тук е плъзгаща библиотека:
За да се придвижите в хоризонтално или вертикално, може да я излъчва по оста X или Y. В този случай, ние се движат на библиотеката от горе до долу на страницата с помощта translateY.
множествена анимация
За съжаление, когато се използва по-горе метод не може да се прилага за един елемент наведнъж две анимации, но в редица области на страницата, която трябваше да го направя.
Добър пример за множествена CSS анимация прилага един елемент е голям облак лявата. Ние трябва да имаме облак се появи и бавно се премества в библиотеката, а след неопределен период от време, се развълнува напред-назад.
HTML5 и CSS3 практика от нула до резултата!
Първата анимация, наречена облаци-ляво се прилага към DIV. Чрез постепенно увеличаване на облака на непрозрачност магически се появи на екрана едновременно, чрез пренасочване на X (вдясно) ос.
Cloud люшка напред-назад: анимацията все още работи, тъй като ние сме в стенограмите продължителността попита безкраен.
Въртенето на елементите
Освен това, елементите могат да се въртят, например, натиснете движи лого документи от ляво на дясно като махало. В този случай, ние използвахме завърта (), за да се превърне произход. Тези две свойства определят крана на X (0) ос, като в същото време позволява да се върти само по Y оста (50%).
Ако изтеглите пример с mekentosj / блог прозорци-анимации. възможно е да се експериментира с различни ъгли с помощта на отрицателни и положителни стойности и проценти.
Бележка за префиксите на продавача версия
Ако искате вашата анимация работа в повечето браузъри, ще трябва да се даде възможност на префиксите на продавача версия. Те се използват като настройки на анимация и ключов кадър. Тези представки:
-WebKit: Chrome, IOS, Safari
-MS: Internet Explorer
Pleease ще ви помогне да генерира продавач версия представки, тъй като сложна анимация, този процес може да бъде много досадно.
Бонус №1: Retina.js
Много разработчици искат да оптимизират своите уебсайтове, за да екрани с висока плътност (DPI). Конкретно Retina.js го прави лесно да се включат големи изображения, като поставите в проект retina.js, а след това маркирайте данни at2x атрибут на изображението което показва високо качество на изображението:
Бонус №2: създаване фигури в CSS
Кофи за документите за страница Beta Windows напълно изготвени в CSS. Предвид големия брой на съществуващите отлични учебници нашия CSS е изненадващо прост. За да създадете фигури с ъгли на кадъра се използват в него:
Страхотно място да се научат как да работят с анимацията - Treehouse от него, където има прекрасен блок на CSS анимации. Това е - част от Фондация Разбира CSS. Въведение в CSS Animation и също така има мрежа от разработчиците на Mozilla мрежа Разработчик: Прилагане на CSS анимация (Използване на CSS анимации).
Редакция: Екип webformyself.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма
