Использование CSS-анимации: практические примеры и идеи

.button {
    background-color: black;        //Кнопка сначала будет черного цвета
    transition: background-color 0.7s ease-in-out, transform 0.5s ease;  //Прописали скорость и функцию анимации для цвета кнопки
}
.button:hover {
    background-color: red;     //Цвет кнопки изменится на красный, когда на нем будет курсор
    transform: scale(1.2);      //Кнопка увеличится в 1,2 раза
}

<div class="box"></div>   // Используйте HTML, чтобы добавить на страницу «коробку» 

    .box {
        width: 200px;         // Коробка в высоту будет 200 пикселей
        height: 200px;      // В ширину тоже 200 пикселей
        background-color: blue;      //Цвет ― голубой
        animation: slide 2s ease-in-out infinite;    // Прописываем параметры анимации, коробка будет двигаться слева направо 2 секунды, с постоянным ускорением, бесконечно
    }
 
    @keyframes slide {
        0% { transform: translateX(0); }     // Начальное состояние нашей анимации, коробка стоит на 0 по оси X
        50% { transform: translateX(100px); }    //50% времени анимации, коробка сместилась на 100 пикселей вправо 
        100% { transform: translateX(0); }    //Конечная точка ― коробка вернулась на место 
    }

// Определение имени анимации grow-and-rotate
@keyframes grow-and-rotate {
// Самый первый кадр анимации (0% прогресса) 
    0% {
        transform: scale(1) rotate(0deg);     //Размер элемента не изменен, нет поворота 
        background-color: blue;                  //Элемент синего цвета 
    }
 
//Середина анимации (50% прогресса)
    50% {
        transform: scale(1.5) rotate(180deg);    //Элемент увеличивается в 1.5 раза и поворачивается на 180 градусов */
        background-color: green;                     //Цвет меняется на зеленый 
    }
//Конечное состояние анимации (100% прогресса)
    100% {
        transform: scale(1) rotate(360deg);    //Элемент возвращается к начальному размеру и поворачивается на 360 градусов
        background-color: blue;                  //Фоновый цвет снова становится синим
    }
}
//Пропишем стили анимированного элемента
.element {
    width: 100px; 
    height: 100px;
    background-color: blue;     //Исходный фоновый цвет 
    animation: grow-and-rotate 4s ease-in-out infinite;     //Применение анимации, длительностью 4 секунды, плавное ускорение и замедление, бесконечное повторение
}

<button class="button">Нажми меня</button>

.button {
    padding: 10px 20px;
    background-color: 3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;  //Меняться будет цвет кнопки, за 0,3 секунды
}
.button:hover {
    background-color: 2980b9;    //Когда курсор будет на элементе, он поменяет цвет
    transform: scale(1.1);            //И увеличится в размере 
}

  <div class="text">Анимированный текст</div>

@keyframes text-animation {
    0% {
        color: red;
        transform: translateX(0);
    }
    50% {
        color: blue;
        transform: translateX(50px);
    }
    100% {
        color: green;
        transform: translateX(0);
    }
}
.text {
    font-size: 24px;
    animation: text-animation 3s ease-in-out infinite;     //Запускаем анимацию длительностью 3 секунды с бесконечным повторением
}

<div class="spinner"></div>

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.spinner {
    width: 50px;
    height: 50px;
    background-color: e74c3c;
    animation: spin 2s linear infinite;      //Запуск поворота анимации на 360, бесконечно

  <div class="fade-in-element">Я появляюсь!</div>

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in-element {
    opacity: 0;      //Начальное состояние — невидимый элемент 
    animation: fade-in 1.5s ease forwards;      //Запускаем появление и исчезновение объекта
}

<div class="hover-box"></div>