W3.CSS Анімації
Анімація - це весело!
Анімація - це весело!
Анімація - це весело!
Анімація - це весело!
Анімація - це весело!
Анімація - це весело!
Анімація - це весело!
Анімація - це весело!
W3.CSS Класи анімації
W3.CSS надає такі класи для анімації:
| Клас | Визначає |
|---|---|
| w3-animate-top | Слайд в елементі зверху (від -300 пікселів до 0) |
| w3-animate-bottom | Зміщує елемент знизу (від -300 пікселів до 0) |
| w3-animate-left | Слайди в елементі зліва (від -300 пікселів до 0) |
| w3-animate-right | Слайд в елементі справа (від -300 пікселів до 0) |
| w3-animate-opacity | Анімує непрозорість елемента з 0 до 1 за 0,8 секунди |
| w3-animate-zoom | Анімує елемент розміром від 0 до 100% |
| w3-animate-fading | Анімує непрозорість елемента від 0 до 1 та від 1 до 0 (збільшення + згасання) |
| w3-spin | Обертає елемент на 360 градусів |
Анімація зверху
Клас w3-animate-top ковзає елементом зверху (від -300px до 0):
Приклад
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Анімація - це весело!</h1>
</div>
Спробуйте самі »
Анімація знизу
Клас w3-animate-bottom ковзає елементом знизу (від -300px до 0):
Приклад
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Анімація - це весело!</h1>
</div>
Спробуйте самі »
Анімація зліва
Клас w3-animate-left ковзає по елементу зліва (від -300 пікселів до 0):
Приклад
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Анімація - це весело!</h1>
</div>
Спробуйте самі »
Анімація справа
Клас w3-animate-right ковзає в елементі справа (від -300 пікселів до 0):
Приклад
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Анімація - це весело!</h1>
</div>
Спробуйте самі »
Зникнення в елементах
Клас w3-animate-opacity анімує непрозорість елемента від 0 до 1 за 0,8 секунди.
Висвітлення елемента за допомогою класу w3-animate-opacity:
Збільшити елементи
Клас w3-animate-zoom анімує (збільшує) елемент розміром від 0 до 100%.
Збільште елемент за допомогою класу w3-animate-zoom:
Обертання елементів
Клас w3-spin обертає елемент на 360 градусів:
Нескінченне згасання
Клас w3-animate-fading плавно з’являється та згасає елемент кожні 10 секунд (безперервно):
Анімація Fade In та Out
Все згасає
Приклад
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
Спробуйте самі »
