Cвойство animation позволяют анимировать переходы от одной конфигурации CSS стилей к другой. CSS-анимации состоят из двух компонентов: стилевое описание анимации и набор ключевых кадров, определяющих начальное и конечное промежуточное состояние анимируемых стилей. Есть три преимущества CSS-анимации перед традиционными способами:
- Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.
- Простота использования для простых анимаций; вы можете создать анимацию, не зная JavaScript.
- Анимации будут хорошо работать даже при умеренных нагрузках системы.
animation հատկությունը թույլ է տալիս անիմացնել անցումները մեկ CSS ոճի կոնֆիգուրացիայից մյուսը: CSS անիմացիաները բաղկացած են երկու բաղադրիչից՝ անիմացիայի ոճի նկարագրություն և հիմնական կադրերի մի շարք, որոնք սահմանում են անիմացիոն ոճերի սկզբի և վերջի միջանկյալ վիճակները: CSS անիմացիայի երեք առավելություն կա ավանդական մեթոդների նկատմամբ.
- Թույլ է տալիս բռաուզեր վերահսկել անիմացիայի հաջորդականությունը՝ դրանով իսկ օպտիմալացնելով բռաուզերի աշխատանքը և արդյունավետությունը: Օրինակ՝ նվազեցնելով անիմացիոն կադրերի թարմացման արագությունը ներկայումս չդիտված պատուհանում:
- Օգտագործման հեշտությունը պարզ անիմացիաների համար ՝ դուք կարող եք ստեղծել անիմացիա առանց JavaScript-ի իմացության:
- Անիմացիաները լավ կաշխատեն նույնիսկ համակարգի թույլ աշխատելու դեպքում:
Синтаксис
Գրելաձև
animation: anim 5s infinite; ⟿ Имя | Время, за которое будет воспроизведен анимация | Количество повторений animation: anim 5s infinite; ⟿ Hello
Hello
Hello
Пример
Օրինակ
⇓Результат данного примера показан на рисунке⇓
⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓
| Browser | IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|---|
| Version | 10+ | 12+ | 43+ | 16+ | 9+ | 30+ |
| Notes |