7. Анимации без Веб-сценариев
Анимации CSS — самый распространённый тип анимации элементов позволяющий создавать плавные изменения Веб-страницы.
Инициализация
@keyframes AnimationName{
0% {
opacity: 0%; /* Правило для начала анимации */
}
100%{
opacity: 0%; /* Правило для конца анимации */
/* Анимации используют стандартные правила CSS */
}
}
.element{
animation-name: AnimationName; /* Название анимации */
animation-duration: 2s; /* Продолжительность 2 секунды */
}
Свойство animation
имеет следующие подсвойства:
animation-name
- определяет имя@keyframes
, настраивающего кадры анимации.animation-duration
- определяет время, в течение которого должен пройти один цикл анимации.animation-timing-function
- настраивает ускорение анимации.animation-delay
- настраивает задержку между временем загрузки элемента и временем начала анимации.animation-iteration-count
- определяет количество повторений анимации; вы можете использовать значение infinite для бесконечного повторения анимации.animation-direction
- даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.animation-fill-mode
- настраивает значения, используемые анимацией, до и после исполнения.animation-play-state
- позволяет приостановить и возобновить анимацию.
Пример
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes AnimationRelative {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes AnimationFlash {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.flash {
position: relative;
animation-name: AnimationFlash;
animation-duration: 1s;
animation-iteration-count: infinite;
font-family: 'Courier New', Courier, monospace;
}
.element {
position: relative;
animation-name: AnimationRelative;
animation-duration: 2s;
font-family: 'Courier New', Courier, monospace;
}
.element.second {
animation-duration: 4s;
}
.element.third {
animation-duration: 6s;
}
.element.fourth {
animation-duration: 10s;
}
.back {
margin-top: 2em;
padding: 1em;
overflow: hidden;
}
body {
background: #000;
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="back">
<div class="element">
<p style="color: lightgreen;margin: 0;">Wake up, Neo...</p>
</div>
<div class="element second">
<p style="color: lightgreen;margin: 0;">The Matrix has you...</p>
</div>
<div class="element third">
<p style="color: lightgreen;margin: 0;">Follow the white rabbit.</p>
</div><br>
<div class="element fourth">
<p style="color: lightgreen;margin: 0;">Knock, knock, Neo.
<span class="flash">_</span>
</p>
</div>
</div>
</body>
</html>
Задание
Создать анимированный логотип, который будет плавно вращаться и увеличиваться в размере с цикличным повторением.
Условия задания:
- Создать круглый логотип с начальным размером 100x100px.
- Использовать
@keyframes
, чтобы:- Логотип плавно увеличивался до 150px.
- Логотип вращался на 360 градусов.
- Анимация должна выполняться бесконечно с циклом.
Задание повышенной сложности
Требуется создать два объекта разного позиционирования (Позиция)
Пример кода
<div class="group">
<img src="C:\Users\fest1\Desktop\stat-pikachu.png" class="pikachu">
<img src="C:\Users\fest1\Desktop\58d8b7915fcf315b0e8d0ff0.png" class="thunder">
<img style="position: absolute; left: 0;z-index: 0; top: 2em;" height="400px" src="C:\Users\fest1\Desktop\fx_thunderbolts_gradient_surge.png" class="thunder">
</div>
.group{
position: relative; /* Обязательно - От данного параметра зависит как будет вести расчёт браузер для отображения элементов внутри данного */
}
.pikachu {
position: absolute;
z-index: 1; /* Всегда определяйте уровни для элементов */
}
.thunder {
position: relative;
z-index: 2;
animation-name: Thunder;
animation-duration: 2s;
opacity: 0;
}
@keyframes Thunder{
0% {
opacity: 0%;
}
30%{
opacity: 100%;
}
60%{
opacity: 0%;
transform: rotate(180deg);
}
90%{
opacity: 100%;
}
100%{
opacity: 0%;
transform: rotate(30deg);
}
}