html - バックグラウンド遅延をすぐではなく前にアニメーション化するにはどうすればよいですか?

okwaves2024-01-25 7

div の背景をアニメーション化してみます。そうではありません。

すぐに赤色が表示されます。遅延を行わない前の背景プロパティ。

最初は背景がなく、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>

------------------------

これで問題は解決しましたか?

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="https://stackoverflow.com/questions/63728320/style.css">
  <title>Document</title>
</head>
<body>


</body>
</html>

html - バックグラウンド遅延をすぐではなく前にアニメーション化するにはどうすればよいですか?

総合生活情報サイト - OKWAVES

カテゴリ一覧