Właściwość CSS Animation pozostaje po animacji


93

Próbuję, aby właściwość animacji CSS pozostała po zakończeniu, czy to możliwe?

To właśnie próbuję osiągnąć ...

Element powinien być ukryty, gdy użytkownik wyląduje na stronie, po 3 sekundach (lub czymkolwiek) powinien zniknąć, a po zakończeniu animacji powinien tam pozostać.

Oto próba gry na skrzypcach ... http://jsfiddle.net/GZx6F/

Oto kod do konserwacji ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Wiem, jak to zrobić z jQuery… to byłoby tak…

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

Czy w3schools jest przestarzałe? Mówi, że Chrome i FireFox obsługują tylko alternatywy.
iambriansreed

5
@iambriansreed: Zawsze zakładam, że tak jest :)
BoltClock

4
@iambriansreed nawet nie klikaj wyników wyszukiwania w3schools. Jeśli przypadkowo to zrobisz, odwróć wzrok od monitora i naciśnij przycisk Wstecz na myszy.
doug65536

Odpowiedzi:


166

Myślę, że szukasz animation-fill-modewłaściwości CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

Właściwość CSS Animation-fill-mode określa, w jaki sposób animacja CSS powinna stosować style do swojego celu przed i po wykonaniu.

dla swojego celu po prostu spróbuj ustawić

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Ustawienie wartości do przodu «cel zachowa obliczone wartości ustawione przez ostatnią klatkę kluczową napotkaną podczas wykonywania»


1
Dzięki Fabrizio, to świetnie, przyjmuję tę odpowiedź. Dzieje się tylko jedna dziwna rzecz, o której zastanawiam się, czy coś wiesz - na iOS (nie testowałem niczego innego) odliczanie do ułatwienia jest wstrzymywane za każdym razem, gdy przewijam, np. Jeśli zacznę przewijać od razu po załadowaniu strony nie zanika. Ale kiedy ZATRZYMUJĘ przewijanie, 3s zaczynają odliczać w dół. Czy to tylko domyślne zachowanie iOS? Dzięki
SparrwHawk

Cóż za fantastyczne rozwiązanie.
Lalnuntluanga Chhakchhuak

Czy jest to dostępne w surowej animacji SVG?
Justin

16

W uzupełnieniu do odpowiedzi z @Fabrizio Calderan , to musi być powiedziane, że można nawet zastosować animation-fill-modewłaściwość forwardsbezpośrednio animation. Więc poniższe również powinny działać:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>


1

Jak animować element i sprawić, by pozostał po zakończeniu animacji:

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>


0

Przydarzyło mi się coś podobnego. Dodałem pozycję: względem animowanego elementu i to naprawiło to za mnie.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.