CSSのアニメーションを、より長くホバリングしなくても簡単に戻せるようにする方法

Question

私の例では、"Bob" by Ian Lunnを使用しています。ホバリング効果は本当に好きですが、ホバリングをやめるとすぐに元の位置に戻ります。どのように私はそれを通常の位置に私のdivを簡単にすることができますか？

アニメーションCSS：

animation-name: hvr-bob-float, hvr-bob; 
animation-duration: .3s, 1.5s; 
animation-delay: 0s, .3s; 
animation-timing-function: ease-out, ease-in-out; 
animation-iteration-count: 1, infinite; 
animation-fill-mode: forwards; 
animation-direction: normal, alternate; 

jsfiddle：http://jsfiddle.net/v3z9rLae/

Answer 1

あなたはサークルを作り、hvr-bobでそれをアニメーション化する擬似要素を使用することができます。次に親のトランジションを使用してhvr-bob-floatのアニメーションをシミュレートします。それは素晴らしいことではありませんが、それは突然のいくつかを減らします。

Here's an update to your fiddle

/* Bob */ 
 
    \t @-webkit-keyframes hvr-bob { 
 
    \t \t 50% { 
 
    \t \t \t -webkit-transform: translateY(4px); 
 
    \t \t \t transform: translateY(4px); 
 
    \t \t } 
 
    \t } 
 
    \t 
 
    \t @keyframes hvr-bob { 
 
    \t \t 50% { 
 
    \t \t \t -webkit-transform: translateY(4px); 
 
    \t \t \t transform: translateY(4px); 
 
    \t \t } 
 
    \t } 
 
    
 
    \t .hvr-bob { 
 
    \t \t display: inline-block; 
 
      height: 80px; 
 
      width: 80px; 
 
      margin: 2%; 
 
    \t \t vertical-align: middle; 
 
    \t \t -webkit-transform: translateZ(0); 
 
    \t \t transform: translateZ(0); 
 
    \t \t box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    \t \t -webkit-backface-visibility: hidden; 
 
    \t \t backface-visibility: hidden; 
 
    \t \t -moz-osx-font-smoothing: grayscale; 
 
      
 
      /* use transition on parent */ 
 
      -webkit-transition: transform 0.3s ease-out; 
 
      transition: transform 0.3s ease-out; 
 
    \t } 
 
    
 
     /* the circle using a pseudo-element */ 
 
     .hvr-bob:before { 
 
      content: ""; 
 
      display: block; 
 
      background-color: #DDDDDD; 
 
      border-radius: 100%; 
 
      width: 100%; 
 
      height: 100%; 
 
     } 
 
    
 
     /* use transform on parent */ 
 
     .hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active { 
 
      -webkit-transform: translateY(-8px); 
 
      transform: translateY(-8px); 
 
     } 
 
    \t 
 
    \t .hvr-bob:hover:before, .hvr-bob:focus:before, .hvr-bob:active:before { 
 
    \t \t -webkit-animation-name: hvr-bob; 
 
    \t \t animation-name: hvr-bob; 
 
    \t \t -webkit-animation-duration: 1.5s; 
 
    \t \t animation-duration: 1.5s; 
 
    \t \t -webkit-animation-delay: .3s; 
 
    \t \t animation-delay: .3s; 
 
    \t \t -webkit-animation-timing-function: ease-in-out; 
 
    \t \t animation-timing-function: ease-in-out; 
 
    \t \t -webkit-animation-iteration-count: infinite; 
 
    \t \t animation-iteration-count: infinite; 
 
    \t \t -webkit-animation-fill-mode: forwards; 
 
    \t \t animation-fill-mode: forwards; 
 
    \t \t -webkit-animation-direction: alternate; 
 
    \t \t animation-direction: alternate; 
 
    \t }

<div class="hvr-bob"></div>

可能