問題タブ [css-animations]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
961 参照

css - テキスト装飾の変更がCSSアニメーションに表示されないのはなぜですか?

HTMLでコンソールUIをエミュレートしたいのですが、テキストの下でアンダースコアを点滅させる必要があります。私のアプローチは、アニメーションのあるアンダーブリンクにクラスを配置することです。色が循環し、テキストが非表示および再表示されますが、下線は表示されません。なんで ?

CSS:

HTML:

0 投票する
5 に答える
31843 参照

jquery - CSS3アニメーションで輪を広げる

ページがロードされたときに円が表示されるようにしようとしていますが、これは問題ありませんが、左上からではなく中央から小さいものから大きいものへと大きくする必要があります。

私が現在持っているものを見ることができます: http://thomasbritton.co.uk/projects/ebrd/

理想的には、これを CSS で実行する必要がありますが、より簡単で安定している場合は JS を使用できます。

何か案は?

アニメーション部分のCSSも次のとおりです。

0 投票する
1 に答える
465 参照

jquery - jQuery スライドショー内で各スライドに 1 つの CSS3 アニメーションを使用する (FF の問題)

これが私の問題です:

jQuery スライドショー (.cycle lite プラグインを使用) があり、基本的には各スライド間の非常に単純なフェード トランジションがあります。簡単です。

スライド内の各主要要素には CSS3 アニメーションが適用されているため、シーンに入ると単純なスライドよりも少しアニメーション化されます。

Webkit では完全に機能しますが、firefox は css3 アニメーションを最初のスライドにのみ適用します。残りのスライドは単にフェード インします。

これがなぜなのか、誰かが知っているのか、修正があるのか​​ 、それとも私のコードがめちゃくちゃなのかと思っていました.

ありがとう!

HTML

CSS

基本的には、個々のスライドの各セクションに同じアニメーション効果を適用したいので、スタイリングに ID を使用しません。

あなたが与えることができるどんな助けも大歓迎です!ありがとう!

0 投票する
1 に答える
3228 参照

css - -サファリのwebkit-animation-fill-mode

キーフレームを使用して、Webページ上の要素をスケーリングしています。問題は、アニメーションがChromeで完全に実行されているが、Safariでは実行されていないことです。キーフレームに0%、80%、100%の値を指定していますが、アニメーションが終了するたびに、100%ではなく80%で定義されたプロパティに戻ります。また、塗りつぶしモードを使用して最後のフレームでアニメーションを停止しましたが、それでも解決策はありませんでした。

アニメーションが終了すると、再び80%のプロパティに戻ります

0 投票する
3 に答える
341 参照

jquery - jQuery - CSS アニメーションが 100% になったときに通知する

アニメーションが jQuery でアニメーションの 100% に達したことを知る方法はありますか?

0 投票する
1 に答える
1310 参照

javascript - CSS3アニメーションはスライドせずに背景画像を変更します

これは私が持っている現在のコードです

これにより、背景画像が次の画像にスライドしますが、スライドさせたくないので、基本的に次のjsコードのように機能します。

やりたいことができる効果はありますか?

前もって感謝します :)

0 投票する
2 に答える
1327 参照

css - Chrome で背景色の CSS3 アニメーションが機能しない

css3 アニメーションを使用して要素の背景色を変更する作業を行っています。ただし、Chrome では機能しません。私が使用しているコードの jsFiddle の例を添付しました。Firefox では機能しますが、Chrome では機能しません。最善を尽くしたにもかかわらず、何が問題なのかを突き止めることができませんでした。

クロムでは、背景色のみへの参照を無視しているようです。アイテムを移動するか、要素に他の効果を適用すると、正常に機能します。

http://jsfiddle.net/qWKEs/6/

前もって感謝します。

0 投票する
3 に答える
18103 参照

animation - 無関係なアニメーションが実行されているときにSafariがフォントの太さを変更する

ページでcssアニメーションを使用していますが、アニメーションの実行中にSafariがページの他の場所で無関係なフォントの太さを変更しているようです。なぜこれが起こるのか考えていますか?ChromeなどのWebkitブラウザを含め、他のすべてのブラウザは正常に動作します。

私はここのビデオでバグを詳しく説明しました-http ://www.screenr.com/gZN8

このサイトもここにあります-http://airport-r7.appspot.com/ですが、急速に変化し続ける可能性があります。

矢印アイコンにコンパス(@ transition-property、@ transition-duration)を使用しています。点滅している見出しにはトランジションは適用されません。Macの場合-ハードウェアアクセラレーションかもしれませんが、私はまだそれを理解しようとしています。

0 投票する
5 に答える
104211 参照

css - アニメーション後も CSS アニメーション プロパティが保持される

完了後も CSS アニメーション プロパティを保持しようとしていますが、これは可能ですか?

これが私が達成しようとしていることです...

ユーザーがページに到達したときに要素を非表示にし、3 秒後 (またはそれ以降) にフェードインし、アニメーションが完了するとそこにとどまります。

これはフィドルの試みです... http://jsfiddle.net/GZx6F/

ここに保存用のコードがあります...

jQueryでこれを行う方法を知っています..次のようになります...

0 投票する
2 に答える
7033 参照

javascript - CSS 3Dアニメーション、どうやって?

3D空間で物事をアニメートしたいと思います。これはCSSとHTML5で可能であることは知っていますが、実用的なチュートリアルが見つかりません。

例としてこのウェブサイトを見つけました。テキストなどをいつでも選択できます。誰かがこれがどのように機能するかを非常に理解しやすく、少し例を挙げてもらえますか?ソースコードは見えますが、よくわかりません…</ p>

これはCSS3またはHTML5、あるいはその両方ですか?

どのくらいのJavaScriptが必要ですか?

どのブラウザがこれをサポートしていますか?