web-dev-qa-db-ja.com

cssでスケールをゆっくり変換する方法は？

私は現在このようにそれを持っています：

http://jsfiddle.net/9DGb2/

しかし、何らかの理由でcssをこれに変更すると：

div {
    width: 200px;
    height: 100px;
    background-color: yellow;
}
div:hover {
    -moz-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    -o-transform: scale(1.05) slow;
    -ms-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    transform: scale(1.05) slow;
}

それは動作しません。

だから私はそれがこのように行うことはできないと思いますか？

csstransformscale
7
MrLars

transitionを追加する必要があります

-webkit-transition: transform 2s ease-in-out;

JS Fiddle Demo

詳細については、以下を参照してください。 CSSトランジションの使用

18
speak

他のブラウザでの遷移

div:hover {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}
7
Rasel