DIVの背景(背景色がない)を赤色にしてから空白に戻したい。今ではJSを使って新しいCLASS(赤を追加する)を問題のDIVに追加し、CSS3は背景色にイージングを追加します。しかしそれはそれを楽にします、私が望むのは、それが赤くなって緩和することです。私は、JSを使って複数のCLassを遅れて追加することでこれを行うことができると思います。 CSS3を使ってこれを完全に行うことはできますか?CSS3トランジションで色を追加して消したい
17
A
答えて
31
2
jQuery UIのアニメーションメソッドを使用する方法の1つは、「通常の」jQueryアニメーション()を背景色のようなものに拡張することです。
このようなトランジションはcss3では可能ですが、明らかに広いブラウザサポートではありません。ユーザーは本部に置いたときの色をフェードイン、およびマウスが出ている時に0.5秒以上、それをバックフェードインします
#maDiv {
-webkit-transition:background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
height: 20px;
width: 20px;
background:#000;
}
#maDiv:hover {
background: #ff0;
}
。ブラウザのサポートの詳細については、ここをクリックしてください:http://www.html5rocks.com/en/features/presentation
関連する問題
- 1. Jqueryでクラスを追加してCSS3トランジションをトリガーする
- 2. CSS3トランジションの展開/折りたたみを追加する
- 3. CSS3トランジション
- 4. CSS3のパースペクティブ、トランジション、トランジションをjQueryで変更
- 5. css3(トランジション)が機能しない
- 6. CSS3トランジションが動作しない
- 7. CSS3トランジション/アニメーションが機能しない
- 8. CSS3トランジション、キーフレーム、アニメーション
- 9. CSS3トランジション:「トランジション:すべて」は「トランジション:x」よりも遅いですか?
- 10. Windows PhoneブラウザでハードウェアアクセラレーションされたCSS3トランジション
- 11. WebKit CSS3トランジションとclipPathを使用したSVG foreignObjectがオーバーフローしています
- 12. スケール上のCss3トランジション
- 13. CSS3トランジションのJQueryフォールバック
- 14. CSS3トランジションが変化しやすくなっていない
- 15. リニアグラジエントを使用したCSS3トランジションでの不思議な動作
- 16. CSS3の複数のトランジションがアニメーションを逆転しました。
- 17. マウス視差へのトランジションを簡単に追加したい
- 18. ボタンへのトランジション効果を追加していません
- 19. CSS3トランジションがトレイルを残す
- 20. CSSトランジションの追加
- 21. 色が変わる間にトランジションを追加するJava
- 22. CSS3のトランジションがボタンで機能しない
- 23. IE/Edge CSS3トランジションがバックグラウンドポジションのプロパティで動作しない
- 24. css3トランジションと変換を使用した絶対移動
- 25. 画像JavaScriptとCSS3トランジションを使用したクロスフェード
- 26. jQueryUIのアニメーション化CSS3トランジションを使用した並べ替え
- 27. CSS3トランジションが正しく動作しない
- 28. CSS3トランジション - 私は私のCSS3トランジションの問題を抱えています同じ要素
- 29. CSS3背景画像トランジション
- 30. css3トランジション:フローティングアイテムの流体レイアウトアニメーション
例のおかげで、私はユーザーのクリックなしでこの効果を期待しています。ページの読み込みでは、特定のDOMエントリを探してからクラスを追加しています。そのクラスが追加されたら、私はそれが赤く点滅し、何も消えることを望みますか? – Purplemonkey
驚くばかり!私はそれを釘付けにした。アニメーションへのポインタのおかげで、それがキーでした。私があなたの例から失敗した唯一のステップは、MOZの仕様(あなたのサンプルページの仕組みがわからない)でした。ありがとうございました。 – Purplemonkey
例は接頭辞なしで動作します:http://leaverou.github.com/prefixfree/ – drublic