1. ホーム
  2. CSS/HTML

[解決済み】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ハック...何かトランジションを上書きしているかもしれません

これを見てほしい。 http://www.w3schools.com/css/css3_transitions.asp