web-dev-qa-db-ja.com

CSS3トランジションが機能しない

私はトランジションを動作させることができませんでした このページ 、誰かが何か理由を知っていますか？

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 */
}
csscss-transitions
16
Extelliqent

移行はアニメーションに似ています。

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 hacks ..移行を上書きするものがあるかもしれません！

これをチェックする必要があります： http://www.w3schools.com/css/css3_transitions.asp

18
Berker Yüceer

一般的な質問に対する一般的な回答... トランジションは自動であるプロパティをアニメーション化できません。トランジションが機能しない場合は、プロパティの開始値が明示的に設定されていることを確認してください。 （たとえば、ノードを折りたたむには、高さが自動でそのままでなければならないときに、代わりにmax-heightに遷移を配置します。max-heightに適切な初期値を指定してから、0に遷移します）

12
bbsimonbb

私にとって、それはdisplay: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

それを削除し、代わりにopacityを使用して、問題を修正しました。

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}
11
Abdoosk

これはあなたが必要なものですか？

http://jsfiddle.net/vSUQP/16/

3
user106197

<script>タグをページの任意の場所（HTMLの場合でも、srcが付いた空のタグであっても）にすると、transitionを何らかのイベントでアクティブ化する必要があります（起動しません）ページが読み込まれたときに自動的に）。

0
Abel W.

HTML：

<div class="foo">
    /* whatever is required */
</div>

CSS：

.foo {
    top: 0;
    transition: top ease 0.5s;
}

.foo:hover{
    top: -10px;
}

これは、ホバーされたときにdivタグを10px上げるための基本的な移行にすぎません。トランジションプロパティの値をclass.hoverプロパティとともに編集して、トランジションの動作を決定できます。

0
Nick Gibbens