knowledge base

マークアップ/フロントエンドエンジニアのWEB制作における備忘録です。平日はWEB屋、休日は社会人劇団の主宰・劇作家をしています。

transition + transform アニメーションが動かない

SafariWindows版)の場合

本来ベンダープレフィックスはプロパティ名にのみ付けますが、WindowsSafariの場合はプロパティの値にもつけましょう。

    -webkit-transition: transform 250ms linear;
    -webkit-transition: -webkit-transform 250ms linear;
    -moz-transition: transform 250ms linear;
    -ms-transition: transform 250ms linear;
    -o-transition: transform 250ms linear;
    transition: transform 250ms linear;

IE9の場合

IE9はtransitionに対応していないため、jQueryアニメーションなどで代用します。

各ブラウザでの対応状況は下記表のとおり。

 

Can I use... Support tables for HTML5, CSS3, etc