how to slowly transform scale with css?

Question

I currently have it like this:

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?

What makes you think you can assign a speed to CSS transformations? Are you maybe thinking about [jQuery](http://jquery.com/)? — Chris, Aug 04 '14 at 13:27

speak · Answer 1 · 2014-08-04T13:45:30.867

29

You need to add a transition

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

JS Fiddle Demo

For more information please consult: Using CSS Transitions

edited Aug 04 '14 at 13:45

answered Aug 04 '14 at 13:25

speak

5,202
4
36
41

4

You should add the transition to the div itself, this way the transition goes in both ways (hovering and un-hovering). It's prettier – singe3 Aug 04 '14 at 13:43
@singe31 very true, he didn't specify that he wanted it both ways so I assumed not, I updated my JSFiddle to reflect that, MrLars take note of singe31's comment! – speak Aug 04 '14 at 13:46

score 10 · Answer 2 · answered Oct 31 '14 at 08:20

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

how to slowly transform scale with css?

2 Answers2