animation

Cвойство animation позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное и конечное промежуточное состояние анимируемых стилей. Есть три преимущества CSS-анимации перед традиционными способами:

Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Простота использования для простых анимаций; вы можете создать анимацию, не зная JavaScript.

Анимации будут хорошо работать даже при умеренных нагрузках системы.

animation հատկությունը թույլ է տալիս անիմացնել անցումները մեկ CSS ոճի կոնֆիգուրացիայից մյուսը: CSS անիմացիաները բաղկացած են երկու բաղադրիչից՝ անիմացիայի ոճի նկարագրություն և հիմնական կադրերի մի շարք, որոնք սահմանում են անիմացիոն ոճերի սկզբի և վերջի միջանկյալ վիճակները: CSS անիմացիայի երեք առավելություն կա ավանդական մեթոդների նկատմամբ.

Թույլ է տալիս բռաուզեր վերահսկել անիմացիայի հաջորդականությունը՝ դրանով իսկ օպտիմալացնելով բռաուզերի աշխատանքը և արդյունավետությունը: Օրինակ՝ նվազեցնելով անիմացիոն կադրերի թարմացման արագությունը ներկայումս չդիտված պատուհանում:

Օգտագործման հեշտությունը պարզ անիմացիաների համար ՝ դուք կարող եք ստեղծել անիմացիա առանց JavaScript-ի իմացության:

Անիմացիաները լավ կաշխատեն նույնիսկ համակարգի թույլ աշխատելու դեպքում:

Синтаксис

Գրելաձև

animation: anim 5s infinite; ⟿ Имя | Время, за которое будет воспроизведен анимация | Количество повторений animation: anim 5s infinite; ⟿ Hello

Hello

Пример

Օրինակ

See the Pen animation by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

Также у тега animation есть следующие под. теги

Поддержка браузера дляԲրաուզերի աջակցությունը animation элемента տարրին
Browser	IE	Edge	Chrome	Firefox	Safari	Opera
Version	10+	12+	43+	16+	9+	30+
Notes