सीएसएस एनिमेशन कैसे करें जब कोई लंबा होवर नहीं हो तो स्थिति में वापस आसानी से कैसे करें?

Question

मेरे उदाहरण में, मैं "Bob" by Ian Lunn का उपयोग कर रहा हूं। मुझे वास्तव में होवर प्रभाव पसंद है, लेकिन जैसे ही मैं इसे घुमाता हूं, इसे वापस मूल स्थिति में झटका देता है। मैं अपनी div वापस अपनी नियमित स्थिति में कैसे आसानी से कर सकता हूं?

एनीमेशन सीएसएस:

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>