前提
CSSのanimationプロパティでアニメーションを起こしたいのですがうまく機能しません。
実現したいこと
ここに実現したいことを箇条書きで書いてください。
２秒のうちに、赤→黄→青 と背景色を変えたいです。
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { width: 100%; height: 90vh; border: 2px solid #000; display: flex; justify-content: center; align-items: center; } .object { width: 50px; height: 50px; display: block; animation-name: animation1; transition-duration: 2s; animation-iteration-count: infinite; animation-fill-mode: both; } @keyframes animation1 { 0% { background-color: red; } 50% { background-color: yellow; } 100% { background-color: blue; } } </style> </head> <body> <div class="container"> <div class="object"></div> <!-- /.object --> </div> </body> </html>
試したこと
色々調べましたが原因はわかりませんでした。
初歩的な質問で恐縮ですが、お力をお貸し頂けると幸いです。
0 コメント