Come rendere le animazioni CSS facili da riportare in posizione quando non si sposta più a lungo?

Nel mio esempio, sto usando "Bob" by Ian Lunn. Mi piace molto l'effetto Hover, ma non appena smetto di librarsi ritorna alla sua posizione originale. Come posso alleggerire il mio div in posizione normale?Come rendere le animazioni CSS facili da riportare in posizione quando non si sposta più a lungo?

animazione 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/

fonte

2015-10-02 CSS Apprentice

http://stackoverflow.com/questions/30144769/how-to-smoothly-revert-css-animation-to-its-current-state – CBroe

Possibile duplicato di [Smoothly stop CSS keyframe animation] (http://stackoverflow.com/questions/29668238/smoothly-stop-css-keyframe-animation) –

@MaximillianLaumeister - La risposta di "Vals" sembra risolvere un problema come il mio , ma non è del tutto chiaro (almeno per me) cosa ha fatto nella sua risposta. Lo sto studiando al momento e chiuderò questo thread non appena avrò un senso della sua risposta. –

è possibile utilizzare un pseudo-elemento per rendere il cerchio e animarlo con hvr-bob. Quindi utilizzare una transizione sul genitore per simulare l'animazione hvr-bob-float. Non è bello, ma riduce un po 'di brusco.

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>

fonte

2015-10-02 21:49:30

Come rendere le animazioni CSS facili da riportare in posizione quando non si sposta più a lungo?

risposta

Problemi correlati