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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

489閲覧

JavaScriptを使ったCSSアニメーションについて

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2023/03/31 07:43

実現したいこと

ここに実現したいことを箇条書きで書いてください。
JavaScriptで以下の「#top-outer-1」に「.top-outer-out」、「#top-outer-2」に「.top-outer-in」を自動的に付与し実行したいです。(「.top-outer-box」は「#top-outer-1」「#top-outer-2」両方に付与しています。)

前提

HTML,CSS,JavaScriptコード自体は書きましたが、実行しても「#top-outer-2」だけ実行されません。検証ツールから確認しましたが、「.top-outer-inを自動で付与するところまでできているので、JSではなくCSSの問題だと思うのですが、何が問題なのかわかりません。
解決策などご教示いただけませんでしょうか。以下に該当箇所のCSSを添付します。

【CSS】
.top-outer-box {
width: 100vw;
height: 50vh;
position: relative;
}
#top-outer-1 {
background: red;
left: 0;
}
#top-outer-2 {
background: yellow;
left: 100%;
}
.top-outer-out {
animation: top-outer-out 10s forwards linear;
}
.top-outer-in {
animation: top-outer-in 10s forwards linear;
}
@keyframes top-outer-out {
0%{
left: 0%;
}
100%{
left: -100%;
}
}
@keyframes top-outer-in {
0%{
left: 100%;
}
100%{
left: 0%;
}
}

試したこと

全てのコードの記入ミス、正誤を確認しました。

補足情報(FW/ツールのバージョンなど)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2023/03/31 07:53

問題をきりわけるべきです jsは関係ないならjsの質問部分は抜いて、複数のcssを付加すると設定が反映されないことだけ質問を絞ったほうがよいでしょう。 CSS設定済みのHTMLとキーフレームアニメを明示ください
退会済みユーザー

退会済みユーザー

2023/03/31 08:01

コメントいただきありがとうございます。 先ほど、余計なCSSを書き込んでいたことが原因だと発覚し、問題が解決いたしました。 せっかくコメントいただいたのに申し訳ありません。
yambejp

2023/03/31 09:34

解決したようでなによりです。 自己解決でクローズしちゃってください
guest

回答2

0

ベストアンサー

誤ったCSSを挿入したことを見つけ、自己解決しました

投稿2023/03/31 09:49

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

まず、JavaScriptでCSSアニメーションを設定するには、要素に対して transitionプロパティ や animationプロパティ を動的に追加する方法があります。また、Web Animations APIというJavaScriptのみでアニメーションを実装する方法もあります。

次に、CSSアニメーションが実行されない原因についてですが、以下のような可能性が考えられます。

・CSSのコードに誤りがある場合(例えば全角で入力した部分など)
・CSSのアニメーションが他のアニメーションと競合している場合
・CSSのアニメーションが一度しか実行されない設定になっている場合
・CSSのアニメーションが終了したときにイベントリスナーを登録していない場合

該当箇所のCSSを拝見しましたが、特に誤りは見つかりませんでした。もしかしたら、JavaScriptのコードに問題があるかもしれません。JavaScriptのコードを教えていただけますか?

投稿2023/03/31 08:57

GG_Glow

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問