問題タブ [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.
css - テキスト装飾の変更がCSSアニメーションに表示されないのはなぜですか?
HTMLでコンソールUIをエミュレートしたいのですが、テキストの下でアンダースコアを点滅させる必要があります。私のアプローチは、アニメーションのあるアンダーブリンクにクラスを配置することです。色が循環し、テキストが非表示および再表示されますが、下線は表示されません。なんで ?
CSS:
HTML:
jquery - CSS3アニメーションで輪を広げる
ページがロードされたときに円が表示されるようにしようとしていますが、これは問題ありませんが、左上からではなく中央から小さいものから大きいものへと大きくする必要があります。
私が現在持っているものを見ることができます: http://thomasbritton.co.uk/projects/ebrd/
理想的には、これを CSS で実行する必要がありますが、より簡単で安定している場合は JS を使用できます。
何か案は?
アニメーション部分のCSSも次のとおりです。
jquery - jQuery スライドショー内で各スライドに 1 つの CSS3 アニメーションを使用する (FF の問題)
これが私の問題です:
jQuery スライドショー (.cycle lite プラグインを使用) があり、基本的には各スライド間の非常に単純なフェード トランジションがあります。簡単です。
スライド内の各主要要素には CSS3 アニメーションが適用されているため、シーンに入ると単純なスライドよりも少しアニメーション化されます。
Webkit では完全に機能しますが、firefox は css3 アニメーションを最初のスライドにのみ適用します。残りのスライドは単にフェード インします。
これがなぜなのか、誰かが知っているのか、修正があるのか 、それとも私のコードがめちゃくちゃなのかと思っていました.
ありがとう!
HTML
CSS
基本的には、個々のスライドの各セクションに同じアニメーション効果を適用したいので、スタイリングに ID を使用しません。
あなたが与えることができるどんな助けも大歓迎です!ありがとう!
css - -サファリのwebkit-animation-fill-mode
キーフレームを使用して、Webページ上の要素をスケーリングしています。問題は、アニメーションがChromeで完全に実行されているが、Safariでは実行されていないことです。キーフレームに0%、80%、100%の値を指定していますが、アニメーションが終了するたびに、100%ではなく80%で定義されたプロパティに戻ります。また、塗りつぶしモードを使用して最後のフレームでアニメーションを停止しましたが、それでも解決策はありませんでした。
アニメーションが終了すると、再び80%のプロパティに戻ります
jquery - jQuery - CSS アニメーションが 100% になったときに通知する
アニメーションが jQuery でアニメーションの 100% に達したことを知る方法はありますか?
javascript - CSS3アニメーションはスライドせずに背景画像を変更します
これは私が持っている現在のコードです
これにより、背景画像が次の画像にスライドしますが、スライドさせたくないので、基本的に次のjsコードのように機能します。
やりたいことができる効果はありますか?
前もって感謝します :)
css - Chrome で背景色の CSS3 アニメーションが機能しない
css3 アニメーションを使用して要素の背景色を変更する作業を行っています。ただし、Chrome では機能しません。私が使用しているコードの jsFiddle の例を添付しました。Firefox では機能しますが、Chrome では機能しません。最善を尽くしたにもかかわらず、何が問題なのかを突き止めることができませんでした。
クロムでは、背景色のみへの参照を無視しているようです。アイテムを移動するか、要素に他の効果を適用すると、正常に機能します。
前もって感謝します。
animation - 無関係なアニメーションが実行されているときにSafariがフォントの太さを変更する
ページでcssアニメーションを使用していますが、アニメーションの実行中にSafariがページの他の場所で無関係なフォントの太さを変更しているようです。なぜこれが起こるのか考えていますか?ChromeなどのWebkitブラウザを含め、他のすべてのブラウザは正常に動作します。
私はここのビデオでバグを詳しく説明しました-http ://www.screenr.com/gZN8
このサイトもここにあります-http://airport-r7.appspot.com/ですが、急速に変化し続ける可能性があります。
矢印アイコンにコンパス(@ transition-property、@ transition-duration)を使用しています。点滅している見出しにはトランジションは適用されません。Macの場合-ハードウェアアクセラレーションかもしれませんが、私はまだそれを理解しようとしています。
css - アニメーション後も CSS アニメーション プロパティが保持される
完了後も CSS アニメーション プロパティを保持しようとしていますが、これは可能ですか?
これが私が達成しようとしていることです...
ユーザーがページに到達したときに要素を非表示にし、3 秒後 (またはそれ以降) にフェードインし、アニメーションが完了するとそこにとどまります。
これはフィドルの試みです... http://jsfiddle.net/GZx6F/
ここに保存用のコードがあります...
jQueryでこれを行う方法を知っています..次のようになります...
javascript - CSS 3Dアニメーション、どうやって?
3D空間で物事をアニメートしたいと思います。これはCSSとHTML5で可能であることは知っていますが、実用的なチュートリアルが見つかりません。
例としてこのウェブサイトを見つけました。テキストなどをいつでも選択できます。誰かがこれがどのように機能するかを非常に理解しやすく、少し例を挙げてもらえますか?ソースコードは見えますが、よくわかりません…</ p>
これはCSS3またはHTML5、あるいはその両方ですか?
どのくらいのJavaScriptが必要ですか?
どのブラウザがこれをサポートしていますか?