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);
    }
}