Jak sprawić, by animacje CSS były łatwiejsze do położenia, gdy nie ma już dłuższego unoszenia?

W moim przykładzie używam "Bob" by Ian Lunn. Bardzo podoba mi się efekt Hover, ale gdy tylko przestaję się unosić, powraca do swojej pierwotnej pozycji. Jak mogę złagodzić mój div z powrotem do jego regularnej pozycji?Jak sprawić, by animacje CSS były łatwiejsze do położenia, gdy nie ma już dłuższego unoszenia?

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

Źródło

2015-10-02 CSS Apprentice

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

Possible duplikat [Płynnie zatrzymuj animację klatek kluczowych CSS] (http://stackoverflow.com/questions/29668238/smoothly-stop-css-keyframe-animation) –

@MaximillianLaumeister - Odpowiedź z "Vals" wydaje się rozwiązywać problemy, takie jak moje , ale nie jest do końca jasne (przynajmniej dla mnie), co zrobił w swojej odpowiedzi. Studiuję to w tej chwili i zamknę ten wątek tak szybko, jak tylko będę w stanie zrozumieć jego odpowiedź. –

Można użyć pseudo-element, aby krąg i animować je hvr-bob. Następnie użyj przejścia na rodzica, aby zasymulować animację hvr-bob-float. Nie jest świetny, ale zmniejsza niektóre z nagłych.

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>

Źródło

2015-10-02 21:49:30

Jak sprawić, by animacje CSS były łatwiejsze do położenia, gdy nie ma już dłuższego unoszenia?

Odpowiedz

Powiązane problemy