CODEWITHSUNDEEP
css
vincent
vincent

Reputation: 461

animating in css3

I have a div that i'm animating with css3 on hover. The animation goes wel but when my mouse leaves the div it snaps back to its original position instead of animating ack to its original position. Here is my code:

#middlesection:hover {
    -moz-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg);
-webkit-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg);
-o-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg);
-ms-transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg);
transform: scale(2.16,2.5) rotate(0deg) translate(0, -53px) skew(0deg, 0deg);
transition-duration: .5s;
-moz-transition-duration: .5s; /* Firefox 4 */
-webkit-transition-duration: .5s; /* Safari and Chrome */
-o-transition-duration: .5s /* Opera */
}

What do i need to change to make it animate back instead of just snapping back?

Upvotes: 0

Views: 324

Answers (1)

kinakuta
kinakuta

Reputation: 9037

Try using the transition shortcut instead of just the transition duration and include an easing function: 

-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;

Upvotes: 1

Related Questions