Как сделать задержку анимации css

Чтобы добавить задержку в анимацию в CSS, можно использовать свойство animation-delay. Это свойство определяет время задержки перед началом выполнения анимации. Рассмотрим пример:

HTML:

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

CSS:

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: color-change 2s ease-in-out 1s;
}
 
@keyframes color-change {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100% {
        background-color: green;
    }
}

В этом примере мы создали элемент <div> с классом .box, который мы будем анимировать. Мы также создаем ключевые кадры с помощью @keyframes, которые изменяют цвет фона нашего блока соответственно на красный, синий и зеленый.

Затем мы устанавливаем свойство animation для .box. Это свойство принимает следующие значения:

• animation-name — имя нашей анимации, которое мы задаем с помощью @keyframes
• animation-duration — продолжительность анимации (здесь мы используем 2 секунды)
• animation-timing-function — функция расписания анимации (здесь мы используем ease-in-out)
• animation-delay — задержка выполнения анимации (здесь мы используем 1 секунду)
• animation-iteration-count — количество повторений анимации (здесь мы используем 1)

Таким образом, наша анимация запустится через 1 секунду после загрузки страницы. Это свойство можно использовать для создания задержки в любой анимации в CSS.