以下のような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}
どのように0秒時点から開始したと判断しましたか?
class"hoge"のdivだけ等の最小構成で試してみましたか?
ご提示のコードを試してみましたが、5秒後から15秒(5-15で10s)にかけてopacityが0から1に換わったように見えましたので、問題が再現しませんでした。(Chrome Firefox)
https://jsfiddle.net/Lhankor_Mhy/8jfoaw3y/
pegyさんの環境では↑このページでも問題は再現しますか?
問題が再現するのであれば、環境の問題かと思います。
問題が再現しないのであれば、お試しのコードと↑このページとの差異に原因があるはずです。ご提示いただいていない部分に原因があるのかもしれません。
moredeep様
Lhankor_Mhy様
コメントありがとうございます。
まず、極端な例で以下のようなものを作成しました。
https://jsfiddle.net/bc28mv0o/
イメージではページがリフレッシュ(JSFIDDLEでいうRun)時点を0秒として15秒時点からうっすら表示(opacity:0)が開始されて20秒目で全てが表示される(opacity:1)かと想像しているのですが、実際にはrunを押してから2,3秒くらいからうっすら見え始めてしまっております。
また、ご提示いただいたhttps://jsfiddle.net/Lhankor_Mhy/8jfoaw3y/の例では
Runを押すと10秒くらいtestがopacity:1の状態で10秒の時点で消えて(opacity:0)15秒までの5秒間に徐々にopacity:1に近づいている感覚です。15秒の時点ではopacity:1だと思います。
ご提示のコードの場合、私の理解では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
https://jsfiddle.net/bc28mv0o/
のCSSでは、
-webkit-animation: fadeIn 10s ease 0s normal;
となっていますから、
animation-delay: 0s;
ですね。
開発者ツールなどを使って、CSSを確認しながら作成していくと、はかどると思いますよ。
コメントありがとうございます。
失礼しました、ご指摘の点はその通りなのですが、修正した以下のコードでは
https://jsfiddle.net/930a6cbL/
はじめにやはり何も起きない(opacity:1)のままで10秒程度してからanimationが開始されるのですが、それは正しい動作なのでしょうか?やはりイメージする5秒から15秒の間でanimationが実行されるものとは相違しているのがわからずに、、、申し訳ございません。
https://jsfiddle.net/nv8f9wyp/
ご提示のコードは、当方の環境(Chrome,Firefox)では、はじめに何も起きない(opacity:1)のままで5秒後にanimationが開始され、15秒でopacity:1になりますので、おっしゃる問題が再現しません。
環境の問題かもしれませんね。
ああ、コメントを修正されたのですね。
https://jsfiddle.net/930a6cbL/
↑こちらでも同様でした。10秒で開始ではなく、5秒で開始でしたので、おっしゃる問題が再現しません。
同じコードを見て、違う表示になるのですから、環境の問題だと思います。
コメント有難うございます。まさにその点なのですが、5秒の時点から開始つまり5秒からopacity0で10秒かけてopacity1になって欲しくつまり15秒目にopacity1にたっするですね
初めの0秒の時点、つまらはrun時点で何故消えてくれていないのかという点です。そちらの環境ではrunの0秒から5秒のアニメスタート時点の5秒間はopacity0なのでしょうか?
2019/08/29 20:58のコメントに「はじめに何も起きない(opacity:1)のままで5秒後にanimationが開始」と書いたとおり、opacity:1;です。その部分については差異はありません。
pegyさんが見たものとの差異は、animation開始が5秒(当方)か10秒(pegyさん)か、ということです。
申し訳ないのですが、当方で再現しない問題は解決しようがありません。問題が再現する別の回答者をお待ちいただくか、環境の差異を明らかにするしかないと思います。
個人的には、「10秒程度してからanimationが開始」というのは、ブラウザのDOM処理に時間がかかっているのではないかな、とは思います。pegyさんの体感としては10秒なのですが、ブラウザとしては最初の5秒はまだ表示が終わっていない、ということではないかと。
無理には申し上げられませんが、私が申し上げたかったのは、認識の差異ではなく、0ー5秒の間もopacity0にしたいのですが、何故で0-5秒の間はopacity1になってしまうのでしょうか?という質問でございました。
おそらく、両者の環境で動作は同じ状況の上でということになります。お尋ねの方法が不適切で惑わせているとすれば、深くおわび差し上げます。申し訳ございません。
このanimationのコードの意味は
0秒→opacity0
5秒→opacity0
15秒→opacity1
と解釈していたので、例えば2秒の段階では何も見えていて欲しくないことを期待しているはずなのにということを申し上げたかったのです。。
そういうことでしたか。
.hoge{
opacity: 0;
animation: fadeIn 10s ease 5s normal;
-webkit-animation: fadeIn 10s ease 5s normal;
}
とすれば解決するかと思いますが、いかがですか?
夜分にもかかわらず、コメントありがとうございます。
https://jsfiddle.net/930a6cbL/
やはり、最初に消えてくれません。。
仰る通りブラウザの環境の問題かもしれません。。
すみません、こちらで実装できました。
https://jsfiddle.net/nv8f9wyp/1/
ご解決されて何よりです。
自己解決の投稿をお願いします。
https://teratail.com/help#resolve-myself
最後までお付き合いを頂き誠に有難うございました。解決に至って良かったです!
回答1件
あなたの回答
tips
プレビュー