質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

CSSのanimationプロパティがうまく機能しません

kss
kss

総合スコア9

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0グッド

0クリップ

203閲覧

投稿2022/12/13 08:57

前提

CSSのanimationプロパティでアニメーションを起こしたいのですがうまく機能しません。

実現したいこと

ここに実現したいことを箇条書きで書いてください。
2秒のうちに、赤→黄→青 と背景色を変えたいです。

該当のソースコード

<!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>

試したこと

色々調べましたが原因はわかりませんでした。
初歩的な質問で恐縮ですが、お力をお貸し頂けると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

animation-duration: 2s; とすべきところが transition-duration: 2s; になっています。

プロパティ名を確認してください。

投稿2022/12/13 09:02

arcxor

総合スコア2451

yambejp👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

kss

2022/12/13 09:19

ご回答ありがとうございます。 とても初歩的なミスにもかかわらず、ご丁寧にご指摘ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。