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>

css css-animations

— SparrwHawk
źródło

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

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»

— Fabrizio Calderan
źródło

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>

Rozwiń fragment

— yckart
źródło

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>

Rozwiń fragment

— codeWithMe
źródło

0

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

— tyau
źródło