CSS анимация за начинаещи
Анимация елементи не само правят дизайна семпъл и елегантен, но и дава на потребителите положителни емоции, които буквално привличат към сайта.
Толкова за персонализирани показатели.
Трябва да ви предупредя - преди да вземат на елементите на анимация, трябва да се научат основите на HTML и CSS
Основните компоненти на CSS анимация - свойства на преход и анимация. и като цяло @keyframes.
Нека ги разгледаме по поръчка.
преход
преход имот се използва за създаване на прости анимации, това означава, че създава ефект на преход между две държави-членки.
преход, от своя страна, може да бъде разделена на четири части, всяка от които засягат един специфичен аспект на ефекта на преход.
1. преход-имот - уточнява имуществото, което ще се оживи. Например, ако елементът ще бъде преместен, той ще бъде свойствата отгоре, отляво, марж и др промените размера, ширина или височина, промените цвета - .. Цвят или фон.
2. преходен продължителност - продължителността на ефекта на прехода. Тя е в секунди.
3. преходен времето функция - скоростта на ефекта на прехода. Това отнема от следните стойности:
облекчи - анимация започва бавно, а след това се ускори и отново забавя към края;
лекота в - бавно начало и до края на ускорено;
облекчаване на стаята - бързо стартиране, и в края се забави;
лекота в стаята - забавяне в началото и в края;
линеен - постоянна скорост;
кубичен-Безие - определя всички стойности в цифрово изражение. Например лекота стойност се изписва така: кубичен-Безие (0.25,0.1,0.25,1).
4. преход забавяне - за забавяне началото на анимацията. Посочени в секунда. Такива като анимация може да започне в рамките на определен период от време след зареждането на страницата.
Съкратеният вариант на записа на анимация е както следва - в преход Имотът е разположен до всички по-горе стойности за с интервал.
Един пример, при който елементът се премества с показалеца на мишката е.
анимация и @keyframes
анимация на имота и @keyframes обикновено се използват за създаване на анимация на всякаква сложност.
анимация собственост определя настройките на действие за анимация (продължителността анимация, повторение, посока, тип на движение, стъпки) и блок се получава @keyframes анимация стъпка по стъпка (промяна на вида и позиция)
анимация имот включва осем компонента:
1. анимация име - името на анимацията. е настроен произволно. Необходимо, за да се определи анимацията в @keyframes блок. тъй като няколко анимации могат да бъдат определени за един елемент.
2. анимация продължителност - продължителността на анимацията, е даден в секунда (и) и милисекунди (MS).
3. анимация-времето функция - определя вида на анимация и се следните стойности:
облекчи - приплъзване;
линеен - плавно движение;
лекота от - в началото на ускорението;
лекота в - ускорение в края;
лекота в стаята - плавно плъзгане от лекота
кубичен-Безие - определя числови параметри позволяват да се приложат по-сложни видове анимация. Инструмент за избор на числени параметри - cubic-bezier.com
стъпка за начало и край стъпка - уточнява стъпка по стъпка анимация (брой)
стъпки - определя броя на стъпките за които анимация (хронометър - стъпки (60) анимация продължителност -60s) ще се извърши
4. анимация-итерация-преброяване - определя броя на повторения на анимация. Това отнема стойностите:
Всеки брой - колко пъти анимационни повтаря;
безкраен - безкрайно повторение;
5. Анимация посока - определя посоката на движение. Това отнема стойностите:
нормална - движението от ляво на дясно;
обратната - движението от дясно на ляво;
алтернативно - пълен цикъл на назад;
заместник-обратната - пълен цикъл, но започва и завършва с края;
6. анимация игра състояние - определя анимация спирки. Това отнема стойностите:
бягане - анимацията работи нормално (по подразбиране);
пауза - анимацията спира на първото стъпало;
7. анимация забавяне - определя закъснението преди възпроизвеждане на анимация. Определена в секунда (и) и милисекунди (MS)
8. анимация попълване режим - позволява да се възпроизвежда анимацията е посочено време за възпроизвеждане. Това отнема стойностите:
няма - анимация работи само в определеното време за възпроизвеждане, а след това се връща на сцената.
напред - анимация продължава и след времето за възпроизвеждане;
назад - анимацията започва да стартирате възпроизвеждането;
и двете - анимацията изтече в началото и след края на времето за игра;
Някои от тези свойства може да изглежда абсурдно в началото, но когато създавате сложни анимации те дават възможност да се реализират смелите творчески решения.
Всички имоти могат да бъдат написани и в съкратен вид, като се посочва анимация имота само техните стойности. Например:
Правило @keyframes - втората стъпка в създаването на сложни анимации.
Вътре в тази норма създава поетапно възпроизвеждане трансформации, настъпили с елемента.
На практика, това е, както следва: в селектора стилове създаден @keyframes, в която са поставени последователно селектори, определящи държава-членка.
Да вземем например елемента
, проси квадратна форма, цвят на фона, както и да промени цвета си от напълно прозрачно до напълно непрозрачни.Селектори е определена от и трансформация от едно състояние в другия елемент.
Но това е много по-удобно да се уточнява промяната състояние в проценти. Тогава броят на селектори може да се увеличи, като по този начин се прекъсне процеса на по-голям брой етапи.
Всеки етап може да се зададе в същото време нещо свое. Например продължителност, граница, размер и т.н.
Пример за появата и изчезването на площада:
Надяваме се основите на създаването на ясна анимация. Сега, че знаете характеристиките, ценностите и инструментите, с отворен Notepad ++ и да се създаде от прости до сложни.
В следващата статия «CSS преместване, завъртане, 3D» виж точно трансформира имот, без която никой няма цена, почти без анимация.
Хайде, това, което е по-интересно