CSS 3 облегчается без лишних усилий

Question

http://jsfiddle.net/wX6eU/

Вращение уменьшается и уменьшается, хотя я не указываю параметр out. Как мне сделать так, чтобы он оставался на 360 или просто возвращался к 0 без анимации?

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
    -webkit-transition:-webkit-transform 0.5s ease-in;
}
div:hover {
    -webkit-transform:rotate(360deg);
}

Answer 1

Просто поместите переход в псевдоселектор :hover:

div {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: blue;
}
div:hover {
    -webkit-transform:rotate(360deg);
    -webkit-transition:-webkit-transform 0.5s ease-in;
}

http://jsfiddle.net/DgBDt/

Answer 2

Я не верю, что можно установить время на выходе "иначе", чем на "в". Опция ease-in - это функция синхронизации. Другие варианты: default, linear, ease-out, ease-in-out и cubic-bezier. Вы можете узнать больше о них здесь , но, к сожалению, нет никакой информации о том, как установить переход на ноль секунд.

Альтернативным вариантом может быть использование JS для получения требуемой функциональности и при этом использование анимации CSS:

$(function(){
  var timer;
  $('.animated').hover(function(){
    timer = setTimeout(function(){ $('.animated').removeClass('animated') }, 500)
  }, function(){
    clearTimeout(timer);
    $(this).addClass('animated');
  });
 });