[解決済み] CSS3 の transition を background-position 以外のすべてのプロパティに適用するにはどうすればよいですか?
2022-08-22 03:18:23
質問
background-position以外のプロパティにCSSのtransitionを適用したい。 この方法でやってみたのですが
.csstransitions a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.csstransitions a {
-webkit-transition: background-position 0s ease 0s;
-moz-transition: background-position 0s ease 0s;
-o-transition: background-position 0s ease 0s;
-ms-transition: background-position 0s ease 0s;
transition: background-position 0s ease 0s;
}
まず、すべてのプロパティをtransitionに設定し、background-positionプロパティをtransitionのみに上書きしてみました。
しかし、これは他のすべてのプロパティもリセットしてしまうようで、基本的にどの遷移も起こらなくなったようです。
すべてのプロパティを一覧表示せずにこれを行う方法はありますか。
どのように解決するのですか?
Firefoxでも動作する解決策を紹介します。
transition: all 0.3s ease, background-position 1ms;
小さなデモを作りました。 http://jsfiddle.net/aWzwh/
関連
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[CSSチュートリアル】Chromeのタブバーを実装するためのCSSのコツ
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[CSSチュートリアル】よく使われるnth-childセレクタをまとめる
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] 複数のプロパティを持つCSSトランジションショートハンドリング?
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル】CSS たった1行のコードでアバターと国旗の一体化を実現
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル]cssのbackgroundとborderタグの例 詳細
-
[css3]css3はtransform-originを使用して、大きな円上のドット分布のレイアウトと回転を実現します。
-
[CSSチュートリアル】ボックス内の複数要素を両端揃えの効果で実現するCSS
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[css3]css3アニメーションマウスが絵の上に置かれると徐々に大きくなり、マウスが絵から離れると徐々に縮む効果
-
[CSSチュートリアル】SVGを使ったCSSアニメーションでエネルギーフローを表現する