How to make div bigger as it spins (CSS3 Animation)

Question

I would like to spin my div when I hover on it and as it spin I want to make it bigger like zoom in.

So far I have this:

[html]

    div class="myMsg">
<p id="welly" style="color: #009">Welcome to Y3!<br><br><br>Thanks for stopping by!</p>
</div>

[css]

.myMsg {
background: white;
width: 800px;
height : 500px;
margin: 100px auto;
border: 1px solid black;
opactiy: 0.5;
-webkit-transform: rotate(360deg); /* Safari and Chrome */
-webkit-transform: scale(.1,.1) skew(45deg) translateX(-300px);
box-shadow: 0px 0px 200px grey;
}

.myMsg:hover {
    opacity: 1;
    -webkit-transform: rotate(360deg); /* Safari and Chrome */
    -webkit-transform: scale(1,.1 skew(0deg);
box-shadow: 0px 0px 200px grey;
}

so I want it to spin before scaling to regular size

Any help is appreciated

score 3 · Accepted Answer · answered Aug 24 '13 at 03:54

First, to show that it can be done.

Now that that's out of the way, let's get down to the nitty gritty and show you how to do it.

First, you'll want to use animation to animate the properties and get the rotation effect. Sadly, a transition won't be enough since transitioning between 0 and 360 means you aren't going anywhere. So, animate your properties from one to the other on the hover. Your code will end up looking something like this:

@keyframes spin {
    from { transform: scale(.1,.1) skew(0deg) rotate(0deg); }
    to { transform: scale(1,1) skew(0deg) rotate(360deg); }
}
.myMsg:hover {
    animation: spin 1s forwards;
}

The @keyframes defines the animation that will happen, and you want to transform from one set of properties to the final one. Then, you set your :hover to play that animation. The relevant properties for the animation are animation-name, animation-duration, and animation-fill-mode (which say that it should have the same properties as the last frame when it is done animating. Webkit requires prefixes, so you'll want to put those in too.

In addition to this, I also placed a transition: transform 1s; on the .myMsg class so that it would animate back after the mouse moves away. But do note that Webkit doesn't seem to play nice with the interaction between the two, so it is a bit choppy and less than ideal. But, with experimental properties like this, sometimes you get what you get.

Some side notes:

Your CSS isn't cross browser compatible, you should clean it up a bit
You're defining 1 transform property, and then immediately overriding it. All transforms need to go in the same declaration. They can't be combined like that

score 0 · Answer 2 · edited May 23 '17 at 12:13

Define an infinite css animation with keyframes for spinning and switch to it on the hover. Use transition for the size (height/width) properties and change them on hover in css also.

Example: http://jsfiddle.net/6guCd/

div {
    margin: 100px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease;
}
div:hover {
    margin: 50px;
    width: 200px;
    height: 200px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

How would I make it stop spinning when the scale is full size? — IceDawg, Aug 24 '13 at 03:56

How to make div bigger as it spins (CSS3 Animation)

2 Answers2