輕鬆懸停關鍵幀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.