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» виж точно трансформира имот, без която никой няма цена, почти без анимация.

Хайде, това, което е по-интересно