HTML5 - Анимации

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

• анимация-забавяне: Приложете определено време, за да можете да стартирате анимацията, след като е активирана.
• анимация-посока: Указва дали анимацията трябва да се възпроизвежда назад или в редуващи се цикли.
• анимация-продължителност: Показва времевия диапазон, през който трябва да се пусне анимацията.
• анимация-итерация-брой: Показва колко пъти анимацията трябва да се повтаря и дори може да постави стойността безкраен за безкрайни повторения на едно и също.
• анимация-име: Указва името на анимацията.
• състояние на анимация-възпроизвеждане: Позволява анимацията да бъде поставена на пауза и след това да продължи да играе.
• animation-timing-func: Посочете как трябва да се третират междинните стойности в анимацията
• анимация: Това е пряк път, с който можем да включим всички свойства на анимацията в една CSS декларация и има следната структура:

анимация:
Сега, когато знаем наличните свойства, нека видим примерен код, за да го анализираме:

 Пример
Има много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.

В този пример виждаме, че в момента на правене : hover на елемента ще имаме закъснение от 100 мс, след което анимацията ще има 500 мс за изпълнение и ще се повтаря безкраен брой пъти.
Тогава виждаме, че с името, което сме дали на приложението, ще използваме свойството @keyframes където ще ви кажем кои елементи ще бъдат анимирани.
Нека да видим как трябва да изглежда в нашия браузър:

Увеличете

Както виждаме, има промяна във фона на елемента, след това цвета на буквата и размера на шрифта, в края на анимацията той се връща в първоначалното състояние и целият този процес се повтаря отново, което му дава движение, което не съществува с използването на преходи.
С това ние също демонстрираме важността на името на анимацията, тъй като то работи като идентификатор, за да може да го присвои a @keyframes.
С това завършваме урока и с това вече можем да изпълняваме основни анимации, за да осигурим повече движение на нашите документи HTML.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка