CODEWITHSUNDEEP
csstransformscale
MrLars
MrLars

Reputation: 161

how to slowly transform scale with css?

I currently have it like this:

http://jsfiddle.net/9DGb2/

But for some reason if I change the css to this:

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;
}

It wont work.

So I am guessing it cant be done this way?

Upvotes: 15

Views: 53829

Answers (2)

Rasel
Rasel

Reputation: 5734

transition in other browser

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;
}

Upvotes: 10

speak
speak

Reputation: 5382

You need to add a transition

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

JS Fiddle Demo

For more information please consult: Using CSS Transitions

Upvotes: 31

Related Questions