Question

即使我没有指定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

我认为不可能将“out”的时间设置为与“in”不同。 ease-in选项是计时功能。其他选项包括default，linear，ease-out，ease-in-out和cubic-bezier。您可以read more about them here，但遗憾的是没有关于将过渡设置为零秒的任何信息。

备用选项可能是使用JS来获得所需的功能并仍然使用CSS动画：

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

CSS 3缓解而不会轻松

2 个答案: