Блог

Главная - Вопросы по программированию - Как анимировать фоновую задержку в before и не сразу?

Как анимировать фоновую задержку в before и не сразу?

#html #css

#HTML #css

Вопрос:

Я пытаюсь анимировать фон div. не это не работает.

Красный цвет появляется немедленно. свойство background before не выполняет задержку.

Как это исправить, чтобы сначала не было фона, а через 5 секунд цвет отображался в течение 5 секунд?

 div {
  position:relative;
  height:300px;
  width:300px;
  border:1px solid red;
 }
 
 div:before {
    content: '';
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    background:red;
    transition:all 5s ease;
    transition-delay: 5s;
}  
 <div></div>

Ответ №1:

Решает ли это вашу проблему?

 body {
  background-color: red;
  animation: test 5s;
}

@keyframes test {
  0% {
    background-color: white;
  }

  100% {
    background-color: red;
  }
}  
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>
<body>


</body>
</html>