轻松悬停关键帧CSS3

Question

尝试使用关键帧为简单旋转设置动画效果。这一切都很好，但我讨厌它在关闭时突然停止。 我已经试过：

-webkit-animation-timing-function: ease-in-out; 

，但只适用于框架不是动画作为一个整体。

这是我的，任何帮助表示赞赏。

@-webkit-keyframes Rotate { 
0% { 
    -webkit-transform:rotate(0deg); 
} 
100% { 
    -webkit-transform:rotate(360deg); 
} } 

而且悬停

a:hover { 
-webkit-animation-name: Rotate; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; } 

Answer 1

我不知道这是否会与关键帧工作，但我会继续前进，假设它会的。

在我一直在努力的例子中，我想要一个箭头，然后在翻滚时顺利地旋转指向下方。下面的代码：

div#welcome img{ 
      -webkit-transition: 1.5s all ease; 
      -moz-transition: 1.5s all ease; 
      -o-transition: 1.5s all ease; 
    transition: 1.5s all ease;    
} 

div#welcome:hover img { 
     -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

而这里的加价FYI：

<div id="welcome"> 
      <h1>Welcome 
      </h1> 
      <img class="hover" src="images/arrow.png" /> 
      <p> 
       blah blah blah 
      </p> 
     </div> 

诀窍是，把你的过渡在初始状态，在这种情况下DIV＃欢迎H1 IMG那么你将最终结果置于动作状态，即：悬停样式。这意味着当用户翻滚时，箭头将平稳地旋转，然后滚出。

The ease part of the styling is explained here.