Примеры анимации блока и картинки в CSS
CSS анимация, состоит из ключевых кадров @keyframes, куда прописываются стандартные CSS свойства. Собственно для создания эффектной анимации, нужны хорошие знания в CSS и креативность.
Правило @keyframes
Для @keyframes задается произвольное название анимации и прописываются ключевые кадры от 0% до 100%, допускается максимальное количество кадров – 100, на практике вряд ли кто-нибудь использует больше 10-ти.
Пример перемещения блока
Демонстрация
Поставим конкретную цель. Я хочу переместить объект по горизонтали вправо и вернуть его назад, в исходную позицию, с бесконечным повтором. Называть анимацию надо осмысленно, исходя из того, что она делает (moveRightLeft). Дальше задаем в @keyframes два ключевых кадра, на которых объект будет менять свои свойства:
- 0% или (from) - отправная точка
- 100% или (to) - конечная точка
@keyframes moveRightLeft {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(400px);
}
}
Созданную анимацию можно применить к любому элементу, но обычно так не делается. Анимация составляется для конкретного элемента, например для блока div.
<div class="square"></div>
Теперь нарисуем квадрат, привяжем к нему название и продолжительность анимации. Эти два свойства – и есть тот самый минимум, чтобы анимация заработала.
animation-name: moveRightLeft;
animation-duration: 3s;
Но мы хотим больше, сменить направление animation-direction: alternate (обратное направление) и бесконечный повтор animation-iteration-count: infinite.
See the Pen Animated block CSS3 by porsake (@porsake) on CodePen.
Опытные разработчики используют сокращенную форму записи свойств анимации.
animation: moveRightLeft 3s infinite alternate;
Между первым и последним кадром можно вставлять промежуточные кадры, посмотрим на втором примере.
Пример вращения блока
Демонстрация
Мы хотим, чтобы квадрат повернулся на 180 градусов по часовой стрелке, замедляясь к последнему кадру и вернулся обратно, не прекращая анимацию.
<div class="rotate"></div>
Дадим название анимации rotate. Наш объект, на втором (25%), третьем (50%) и четвертым (75%) промежуточном кадре, поменяет свои значения (градус поворота).
@keyframes rotate {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(45deg);
}
50% {
transform: rotate(90deg);
}
75% {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}
See the Pen Animated block CSS3 rotate by porsake (@porsake) on CodePen.
Пример анимации картинки
Демонстрация
Правило @keyframes работает и для анимирования картинок. Хочу, чтобы картинка из маленькой превратилась в большую.
<img class="scale" src="demo.jpg">
.scale {
width: 200px;
height: 200px;
position: absolute;
animation: scale 3s infinite;
position: absolute;
top: 30%;
left: 40%;
transform: translate(-30%, -40%);
}
@keyframes scale {
0% {
transform: scaleX(0) scaleY(0);
}
100% {
transform: scaleX(2) scaleY(2);
}
}
See the Pen Animated image CSS3 by porsake (@porsake) on CodePen.
На этих простых примерах, легко можно понять принципы CSS анимации. На реальных проектах надо обязательно прибавлять вендорные префиксы.
Научиться создавать красивые анимации, можно только после основательного освоения HTML5 и CSS3.
-
Создано 26.12.2018 10:20:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.