W3.CSS- анимации
Анимация - это весело!
Классы анимации W3.CSS
W3.CSS предоставляет следующие классы для анимации:
| Класс | Определяет |
|---|---|
| w3-анимация-топ | Слайды в элементе сверху (от -300 пикселей до 0) |
| w3-анимация-дно | Слайды в элементе снизу (от -300 пикселей до 0) |
| w3-анимация-влево | Слайды в элементе слева (от -300 пикселей до 0) |
| w3-анимация-справа | Слайды в элементе справа (от -300 пикселей до 0) |
| w3-анимация-непрозрачность | Анимирует непрозрачность элемента от 0 до 1 за 0,8 секунды. |
| w3-анимация-зум | Анимирует элемент от 0 до 100% размера |
| w3-анимация-затухание | Анимирует непрозрачность элемента от 0 до 1 и от 1 до 0 (нарастание + исчезновение) |
| w3-спин | Вращает элемент на 360 градусов |
Анимированный топ
Класс w3-animate- top вставляет элемент сверху (от -300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
Анимировать низ
Класс w3-animate-bottom скользит по элементу снизу (от -300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
Анимировать слева
Класс w3- animate-left перемещает элемент слева (от -300 пикселей до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
Анимация справа
Класс w3- animate-right вставляет элемент справа (от -300px до 0):
Пример
<div class="w3-container">
<h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
Исчезновение элементов
Класс w3-animate-opacity анимирует непрозрачность элемента от 0 до 1 за 0,8 секунды.
Затемнение элемента с классом w3-animate-opacity :
Пример
<div class="w3-animate-opacity">..</div>
Увеличить элементы
Класс w3-animate-zoom анимирует элемент размером от 0 до 100%.
Увеличьте масштаб элемента с помощью класса w3-animate-zoom :
Пример
<div class="w3-animate-zoom">..</div>
Спиновые элементы
Класс w3-spin вращает элемент на 360 градусов:
Пример
<div class="w3-spin">..</div>
Угасание бесконечности
Класс w3-animate-fading постепенно появляется и исчезает с одного элемента каждые 10 секунд (непрерывно):
Анимация появления и исчезновения
Пример
<div class="w3-animate-fading">..</div>
Исчезнуть все
Пример
<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">