Введение

Сегодня я расскажу вам, как сделать анимацию. В этом посте мы увидим все необходимые свойства анимации. Вы можете получить код на моем github. Итак, начнем!!

Анимация

Анимация — это свойство, используемое для улучшения внешнего вида веб-сайта. Это обеспечивает приятное взаимодействие с пользователем, а также помогает показать людям цель веб-сайта.

Базовая анимация

Первая анимация: изменение цвета квадрата

Square

Здесь я создаю квадрат синего цвета, а затем придаю ему несколько стилей. Цвет можно взять любой!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Теперь мы сделаем анимацию.

Шаг 1. Создайте анимацию @keyframes

Чтобы сделать анимацию, вам нужно установить @keyframes. Он содержит стили, которые вы хотите присвоить своему элементу в определенное время, а затем вам нужно дать ему имя. В моем случае я меняю цвет квадрата. Итак, я даю ему название цвета. Теперь вы можете написать @keyframes двумя типами, например

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

Если вы хотите выполнить анимацию, состоящую из двух шагов, вы можете использовать «до» и «от». Или вы можете сделать это, используя процентное значение, например

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Процентные значения используются, когда вам нужно выполнить несколько задач в анимации, но вы можете использовать и то, и другое! Обычно я использую процентное значение для анимации

Шаг 2. Установите свойство анимации на квадрате.

Теперь мы анимируем свойство квадрата. Для этого вам нужно знать о свойствах анимации. Я расскажу вам те, которые чаще всего используют:

• animation-name — используется для указания браузеру, какие @keyframes вы хотите использовать. В моем случае имя @keyframes — цвет.

• animation-duration — указывает, через сколько времени должна завершиться анимация.

• animation-iteration-count — используется для указания количества времени, которое должно выполняться.

Подробнее об анимации можно узнать на w3school или на любом другом сайте. Теперь мы будем использовать свойство анимации, но напишем его в одну строку следующим образом:

    animation: color 4s infinite;

В Css есть 7 свойств анимации. Чтобы использовать свойство анимации в одной строке, я сначала пишу имя анимации, которое представляет собой цвет, затем длительность анимации, которая в моем случае равна 4 с, а затем устанавливаю число итераций анимации на бесконечное значение. Если вы хотите использовать анимацию только один раз, вы можете установить для нее значение 1. Вы также можете самостоятельно установить значения свойства анимации.

Теперь, если вы увидите свой квадрат, он будет менять свой цвет снова и снова! Теперь мы заставим квадрат двигаться, меняя цвет.

Вторая анимация: перемещение квадрата при изменении цвета!

Для этого я буду использовать тот же квадрат и создам для него еще один @keyframes. Мы будем использовать те же шаги, что и раньше

Шаг 1. Создайте анимацию @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Здесь я делаю @keyframes с перемещением имени и использую три шага для этой анимации. Сначала я установил значение левого поля на 0 пикселей и цвет фона. Затем при 50% я установил значение left на 300 пикселей, изменил цвет фона и, наконец, снова установил значение left на 0 пикселей, чтобы он оказался на первой позиции.

Шаг 2. Установите свойство анимации на квадрате

    animation: move 4s infinite;

Здесь я установил имя анимации на перемещение, затем длительность анимации на 4 секунды и количество итераций анимации на бесконечное. Опять же, вы можете установить значение анимации по своему выбору. А также не забудьте прокомментировать первое свойство анимации, иначе что-то может пойти не так!

Заключение

Поскольку пост уже слишком длинный, мы продолжим его в другом посте. На сегодня этого достаточно. Надеюсь, вы это понимаете. Я изо всех сил стараюсь рассказать все об анимации. А также подскажите в комментариях, на какую тему мне написать следующий пост. Спасибо за чтение!