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

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

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

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

Q&A

解決済

1回答

9416閲覧

animation-delayが効かない

pegy

総合スコア243

CSS

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

0グッド

1クリップ

投稿2019/08/29 08:46

以下のようなanimationで意図としては5秒後から15秒(5-15で10s)にかけてopacityを0から1に近づけたいのですが実際には、0秒の時点からanimationがstartしてしまいます。リファレンスガイドにはanimation-durationの指定時間数がanimationの実行される時間(今回なら10s)でanimation-delayが開始時間(今回なら5s)と読めるのですが、間違いがあるのでしょうか?またはベンダープレフィックスの問題でしょうか?現状chromeで確認しています。

よろしくお願い申し上げます。

css

1.hoge{ 2 animation: fadeIn 10s ease 5s normal; 3 -webkit-animation: fadeIn 10s ease 5s normal; 4} 5 6@keyframes fadeIn { 7 0% {opacity: 0} 8 100% {opacity: 1} 9} 10@-webkit-keyframes fadeIn { 11 50% {opacity: 0} 12 100% {opacity: 1} 13}

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

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

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

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

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

moredeep

2019/08/29 09:28 編集

どのように0秒時点から開始したと判断しましたか? class"hoge"のdivだけ等の最小構成で試してみましたか?
Lhankor_Mhy

2019/08/29 10:17

ご提示のコードを試してみましたが、5秒後から15秒(5-15で10s)にかけてopacityが0から1に換わったように見えましたので、問題が再現しませんでした。(Chrome Firefox) https://jsfiddle.net/Lhankor_Mhy/8jfoaw3y/ pegyさんの環境では↑このページでも問題は再現しますか? 問題が再現するのであれば、環境の問題かと思います。 問題が再現しないのであれば、お試しのコードと↑このページとの差異に原因があるはずです。ご提示いただいていない部分に原因があるのかもしれません。
pegy

2019/08/29 11:12

moredeep様 Lhankor_Mhy様 コメントありがとうございます。 まず、極端な例で以下のようなものを作成しました。 https://jsfiddle.net/bc28mv0o/ イメージではページがリフレッシュ(JSFIDDLEでいうRun)時点を0秒として15秒時点からうっすら表示(opacity:0)が開始されて20秒目で全てが表示される(opacity:1)かと想像しているのですが、実際にはrunを押してから2,3秒くらいからうっすら見え始めてしまっております。
pegy

2019/08/29 11:14

また、ご提示いただいたhttps://jsfiddle.net/Lhankor_Mhy/8jfoaw3y/の例では Runを押すと10秒くらいtestがopacity:1の状態で10秒の時点で消えて(opacity:0)15秒までの5秒間に徐々にopacity:1に近づいている感覚です。15秒の時点ではopacity:1だと思います。
pegy

2019/08/29 11:17

ご提示のコードの場合、私の理解では5秒まではopacity:0で5秒から15秒の秒間をかけて、徐々にopacity:1に近づき、15秒の時点でopacity:1に到達するという理解なのですが、環境の問題でしょうか。。。 環境は以下の通りです。 Google Chrome : バージョン: 76.0.3809.100(Official Build) (64 ビット) MacOS: OS X EI Caption 10.11.6
Lhankor_Mhy

2019/08/29 11:35

https://jsfiddle.net/bc28mv0o/ のCSSでは、 -webkit-animation: fadeIn 10s ease 0s normal; となっていますから、 animation-delay: 0s; ですね。 開発者ツールなどを使って、CSSを確認しながら作成していくと、はかどると思いますよ。
pegy

2019/08/29 11:57 編集

コメントありがとうございます。 失礼しました、ご指摘の点はその通りなのですが、修正した以下のコードでは https://jsfiddle.net/930a6cbL/ はじめにやはり何も起きない(opacity:1)のままで10秒程度してからanimationが開始されるのですが、それは正しい動作なのでしょうか?やはりイメージする5秒から15秒の間でanimationが実行されるものとは相違しているのがわからずに、、、申し訳ございません。
Lhankor_Mhy

2019/08/29 11:58

https://jsfiddle.net/nv8f9wyp/ ご提示のコードは、当方の環境(Chrome,Firefox)では、はじめに何も起きない(opacity:1)のままで5秒後にanimationが開始され、15秒でopacity:1になりますので、おっしゃる問題が再現しません。 環境の問題かもしれませんね。
Lhankor_Mhy

2019/08/29 12:19 編集

ああ、コメントを修正されたのですね。 https://jsfiddle.net/930a6cbL/ ↑こちらでも同様でした。10秒で開始ではなく、5秒で開始でしたので、おっしゃる問題が再現しません。 同じコードを見て、違う表示になるのですから、環境の問題だと思います。
pegy

2019/08/29 12:20

コメント有難うございます。まさにその点なのですが、5秒の時点から開始つまり5秒からopacity0で10秒かけてopacity1になって欲しくつまり15秒目にopacity1にたっするですね
pegy

2019/08/29 12:23

初めの0秒の時点、つまらはrun時点で何故消えてくれていないのかという点です。そちらの環境ではrunの0秒から5秒のアニメスタート時点の5秒間はopacity0なのでしょうか?
Lhankor_Mhy

2019/08/29 12:28

2019/08/29 20:58のコメントに「はじめに何も起きない(opacity:1)のままで5秒後にanimationが開始」と書いたとおり、opacity:1;です。その部分については差異はありません。 pegyさんが見たものとの差異は、animation開始が5秒(当方)か10秒(pegyさん)か、ということです。 申し訳ないのですが、当方で再現しない問題は解決しようがありません。問題が再現する別の回答者をお待ちいただくか、環境の差異を明らかにするしかないと思います。
Lhankor_Mhy

2019/08/29 12:31

個人的には、「10秒程度してからanimationが開始」というのは、ブラウザのDOM処理に時間がかかっているのではないかな、とは思います。pegyさんの体感としては10秒なのですが、ブラウザとしては最初の5秒はまだ表示が終わっていない、ということではないかと。
pegy

2019/08/29 12:35 編集

無理には申し上げられませんが、私が申し上げたかったのは、認識の差異ではなく、0ー5秒の間もopacity0にしたいのですが、何故で0-5秒の間はopacity1になってしまうのでしょうか?という質問でございました。 おそらく、両者の環境で動作は同じ状況の上でということになります。お尋ねの方法が不適切で惑わせているとすれば、深くおわび差し上げます。申し訳ございません。
pegy

2019/08/29 12:39

このanimationのコードの意味は 0秒→opacity0 5秒→opacity0 15秒→opacity1 と解釈していたので、例えば2秒の段階では何も見えていて欲しくないことを期待しているはずなのにということを申し上げたかったのです。。
Lhankor_Mhy

2019/08/29 13:06

そういうことでしたか。 .hoge{ opacity: 0; animation: fadeIn 10s ease 5s normal; -webkit-animation: fadeIn 10s ease 5s normal; } とすれば解決するかと思いますが、いかがですか?
pegy

2019/08/29 22:30

夜分にもかかわらず、コメントありがとうございます。 https://jsfiddle.net/930a6cbL/ やはり、最初に消えてくれません。。 仰る通りブラウザの環境の問題かもしれません。。
pegy

2019/08/30 00:59

最後までお付き合いを頂き誠に有難うございました。解決に至って良かったです!
guest

回答1

0

自己解決

.hogeにopacity0を追加することで解決しました!

投稿2019/08/30 00:58

pegy

総合スコア243

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問