Още за анимациите

Пълен контрол върху CSS анимациите

CSS анимациите не са само движение – те могат да бъдат прецизно контролирани чрез допълнителни параметри. Най-важното е, че с правилната комбинация от свойства можете да управлявате кога започва анимацията, как се изпълнява, колко пъти се повтаря и какво се случва в края ѝ. Освен това всички тези настройки могат да се обединят в краткия синтаксис animation.

Стъпка по стъпка: разширяване на анимация

1. Добавете забавяне със animation-delay: 3s;, за да не стартира веднага.
2. Променете начина на движение с animation-timing-function: linear; (по подразбиране е ease).
3. Задайте поведение в края чрез animation-fill-mode: both;, за да се запазят крайните стилове.
4. Определете брой повторения с animation-iteration-count: 2; или infinite.
5. Добавете animation-direction: alternate;, за да се изпълнява напред и назад.
6. Обединете всичко в краткия запис чрез animation, като подредите параметрите в правилната последователност.
7. Добавете повече от една анимация, като ги разделите със запетая.

Основни свойства

• animation-delay – задава изчакване преди стартиране.
• animation-timing-function – определя скоростта (напр. linear, ease).
• animation-fill-mode – контролира крайното състояние (both запазва стиловете).
• animation-iteration-count – брой повторения или infinite.
• animation-direction – посока на изпълнение (alternate връща обратно).
• animation – кратък синтаксис за всички параметри.
• animation-name – позволява изброяване на няколко анимации, разделени със запетая.