[解決済み】CSS3 トランジションが機能しない
2022-01-03 18:48:25
質問
でトランジションがうまくいきませんでした。 このページ なぜかわかる方いらっしゃいますか?
div.sicon a {
transition: background 0.5s linear;
-moz-transition: background 0.5s linear; /* Firefox 4 */
-webkit-transition: background 0.5s linear; /* Safari and Chrome */
-o-transition: background 0.5s linear; /* Opera */
-ms-transition: background 0.5s linear; /* Explorer 10 */
}
解決方法は?
トランジションはアニメーションに近い。
div.sicon a {
background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
transition: background 0.5s linear;
-moz-transition: background 0.5s linear; /* Firefox 4 */
-webkit-transition: background 0.5s linear; /* Safari and Chrome */
-o-transition: background 0.5s linear; /* Opera */
-ms-transition: background 0.5s linear; /* Explorer 10 */
}
そこで、そのアニメーションをアクションで呼び出す必要があります。
div.sicon a:hover {
background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}
また、ブラウザのサポート状況を確認し、あなたが行おうとしていることに何らかの問題がある場合は、それを確認します。スタイルシートのcss-overridesをチェックし、さらに
behavior: ***.htc
CSSハック...何かトランジションを上書きしているかもしれません
関連
-
HTML iframeタグの使用例解説
-
CSSによるリアルな水滴の効果
-
offsetTop 使用方法詳細
-
ポジションプロパティで進めるcssの簡単な説明
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSSは常にJavascriptより優先されるべきか?
-
[解決済み] ページロード時のフェードイン効果にCSSを使用する
最新
-
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 実装 サイバーパンク風ボタン