анимация в css3

Question

У меня есть div, который я оживляю с помощью css3 при наведении курсора. Анимация идет хорошо, но когда моя мышь покидает div, она возвращается в исходное положение вместо анимации ack в исходное положение. Вот мой код:

#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 */
}

Что мне нужно изменить, чтобы оживить его вместо того, чтобы просто вернуться назад?

Answer 1

Попробуйте использовать ярлык перехода вместо просто продолжительности перехода и включите функцию замедления:

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