問題タブ [css-transitions]

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 投票する
2 に答える
849 参照

javascript - 色遷移 JavaScript

背景に非常に優れた色の変化効果があるように見えるサイトに気付きました。リンクが押されると背景の色が変わりますが、すぐには見えません。移行が行われるようです..

http://fuelbrandinc.com/#/about

誰かがこの機能を複製する方法を知っているかどうか疑問に思っていましたか?

ありがとう、

0 投票する
8 に答える
250733 参照

css - webkit-transform の webkit-transition でちらつきを防止する

重複の可能性:
iphone webkit css アニメーションでちらつきが発生する

何らかの理由で、webkit-transform プロパティのアニメーションが発生する直前に、わずかなちらつきがあります。これが私がやっていることです:

CSS:

JavaScript:

遷移が発生する直前にちらつきがあります。これがなぜなのか、どうすれば問題を解決できるのでしょうか?

ありがとう!

更新:これは Safari でのみ発生します。アニメーションは機能しますが、Chrome では発生しません。

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

jquery - jquery画像のサイズ変更トランジションonMouseOver

マウスが画像の上にあるときにこの画像のサイズが大きくなり、マウスが画像の外にある場合はサイズが小さくなり、これらすべてがスムーズな移行として行われるjqueryプラグインがあるかどうか疑問に思っています。ありがとう!

0 投票する
60 に答える
1413575 参照

css - 高さを移行するにはどうすればよいですか: 0; 高さ: 自動; CSSを使用していますか?

<ul>CSSトランジションを使用してスライドダウンを作成しようとしています。

<ul>から始まりますheight: 0;。ホバーすると、高さが に設定されheight:auto;ます。ただし、これにより、遷移ではなく、単に表示されます。

からheight: 40px;まで行うと、height: auto;までスライドしheight: 0;、突然正しい高さまでジャンプします。

JavaScript を使用せずにこれを行うにはどうすればよいでしょうか?

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

css - 変換オプションに異なる期間/遅延を設定することは可能ですか?

HTML オブジェクトに複数の変換オプションを設定したいのですが、期間と遅延が異なります。

そのようなものを使用しようとすると:

次に、変換と不透明度に異なる時間関数を使用しますが、回転とスケーリングに異なるオプションを設定できますか?たとえば、10 秒間回転し、20 秒間スケーリングしますか?

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

css - グラデーション遷移の Webkit サポート

Webkit がいつグラデーションの遷移をサポートするか知っている人はいますか?
たとえば、次のコードは Chrome 6 では機能しません (grad-transition がリンクであると仮定します)。

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

css - :before および :after 疑似要素の -webkit-animation/transition-property を有効にする方法は?

-webkit-animation:before および :after 疑似要素を有効にする方法は?

http://jsfiddle.net/4rnsx/で、:before と :after では機能しないことがわかります。
ここでは、Mootools http://jsfiddle.net/6bzCS/でこの機能を有効にしようとしています。


Mozilla - Firefox 4 でサポート予定https://developer.mozilla.org/en/CSS/-moz-transition-property
W3C - CSS3 は、すべての要素の transition-property をサポートしています。:before および :after 疑似要素http:// www.w3.org/TR/css3-transitions/#transition-property


更新: CSS3 ツールチップの有効fadein化方法http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using -css3-and-jquery/デモ?fadeout

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

css - 白黒からカラーへの変換はどのように行われますか

私は、ホバーしたときに、このサイトで写真が白黒ではなく本当の色をどのように表示するかを調べようとしています: http://2010.dconstruct.org/ . 画像の 2 つのバージョンがあるという単純な問題ではないと思いますが、よくわかりません。

私はそれを助けていただければ幸いです!

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

webkit - webkit-transitionを使用して複数のtext-shadowとbox-shadowの値をレンダリングする際にWebkitが窒息する

CSS3 -webkit-transitionは、複数のボックスシャドウ値とテキストシャドウ値を窒息させています。(Chrome&Safari)

具体的には、2つのシナリオがあります...

  1. 私のテキストには、3つのテキストシャドウ(奥行きのある外観)を持つドキュメント見出しがあります。また、-webkit-transitionルールを使用して、ホバー時にテキストシャドウの色を変更し、ホバー時に光るように見せています。

  2. 上記と同じようにボックスシャドウルールを使用しているリンクがあり、深度効果には3つの値があります。また、ここで-webkit-transitionを使用して、ホバー効果のボタンとテキストの色を変更します。

問題:上記の両方のインスタンスで、要素にカーソルを合わせると、Webkitはトランジションを一度に1つずつレンダリングするように見えるため、値がすべて同時に新しい値にフェードインするわけではありません。代わりに、それぞれがレンダリングされるときに表示されます-次々に、そしてあなたが見るようにそれは非常に厄介な移行です。

私はいくつかのインスタンスを持っています、そしてここにそれらのいくつかへのリンクがあります:(必ずChromeまたはSafariで表示してください)

-ページh1の:hoverでのテキストシャドウ遷移(「GIFTof HEALING」テキスト):http ://cure.org/goh

-最初のスライド呼び出しのアクションの:hoverでのボックスシャドウ遷移([続きを読む]ボタン):http ://cure.org

-フッターナビゲーションリンク(About、Rodsなど)の:hoverでのボックスシャドウ遷移:http://tuscaroratackle.com

最後に、私が使用しているコードのサンプルを示します:(どのサイトからも作成したものではなく、この質問のために作成した例です。ここでライブを参照してください:http: //joelglovier.com/test/webkit-shadow-transition-bug .html

したがって、ここでの質問は、CSSで異なる構文を使用するなど、順序付けられたレンダリングを防ぐ方法はありますか?(複数のbox-shadow値の特定の順序、またはすべてを1つのルールに追加する代わりに複数のbox-shadow宣言を使用するなど)

2011年5月9日更新:バグがWebkitに報告されました(以下のHusarのコメントを参照)。また、Chromeの最近のビルド(具体的には現在の10.0.648.205バージョン)がスムーズな移行をレンダリングし、バグを効果的に排除していることがわかります。ただし、Safari(バージョン5.0.5(6533.21.1))では、バグのあるレンダリングが引き続き表示されます。

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

css - ページをスクロールするときに iPad で CSS トランジション/翻訳を使用しているときにグリッチが発生する

ハードウェア アクセラレーションを使用して iPad で使用するアニメーションを最適化しているときに、完全に解決できていない問題に遭遇しているようです。翻訳などの Webkit 変換を適用している場合、アニメーションはうまく動作しますが、アニメーションの途中でユーザーがページをスクロールすると、ユーザーがページをスクロールすると、アニメーションが途切れ、元の位置に戻って続行しようとします。終点までのアニメーション。

この問題の解決策をどこでも探していて、iPad ストアでも発生していることがわかりました。手元に iPad があり、たとえばhttp://webkit.org/demos/transitions-and-transforms/に移動し、項目を選択すると、ボタン アニメーションが完了する前にページをドラッグ (スクロール) します。放すと、アニメーションがちらつき、元の位置に戻り、完了するまで繰り返します。

これを回避できる唯一の方法は、touchmove イベントが発生したときです。アニメーションに元の場所にとどまるように指示します。どこに行けば関係なく元に戻ります(cssトランジションが技術的に停止できないように見える方法を見てください)。

この問題の回避策を見つけた人はいますか?これはアニメーションの問題ではなく、iPad のバグであると確信しています (これは、preserve-3d に関する問題とは関係ありません)、または報告する必要があるかどうかこれを課題として。

ありがとう!