2012-03-19 32 views
47

Próbuję uzyskać właściwość animacji CSS, aby pozostać po ukończeniu, czy to możliwe?Własność animacji CSS pozostaje po animowaniu

To co staram się osiągnąć ...

Element powinny być ukryte, gdy ziemie użytkowników na stronie, po 3 sekundach (lub cokolwiek), powinien zanikać i raz animacja ma ukończone powinno się tam pozostać.

Oto skrzypce próba ... http://jsfiddle.net/GZx6F/

Oto kod dla zachowania ...

<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 .. byłoby tak. ..

<h2>test</h2> 

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

Czy [w3schools] (http://www.w3schools.com/cssref/css3_pr_keyframes.asp) jest nieaktualne? Mówi, że Chrome i FireFox obsługują tylko alternatywy. – iambriansreed

+3

@iambriansreed: Zawsze zakładam, że to jest :) – BoltClock

+3

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

Odpowiedz

92

myślę szukasz animation-fill-mode własności CSS3

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

Właściwość CSS animacja-fill-mode określa jak animacja style CSS powinno stosować się do jego docelowego przed i po jego wykonaniu.

dla celów prostu spróbuj ustawić

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

Ustawianie przodu wartość «cel zachowa wartości obliczone ustawiony przez ostatnie klatki kluczowej napotkanych w trakcie realizacji»

+1

Dzięki Fabrizio, świetnie, przyjmuję tę odpowiedź. Dzieje się tylko jedna dziwna rzecz, zastanawiam się, czy wiesz coś o - na iOS (nie testowałem niczego innego), odliczanie do łatwości jest wstrzymane za każdym razem, gdy przewijam, np. jeśli zacznę przewijanie od razu po załadowaniu strony, to nie zniknie. Ale gdy ZATRZYMUJĘ przewijanie, zaczyna się odliczanie. Czy to jest właśnie domyślne zachowanie systemu iOS? Dzięki – SparrwHawk

6

Oprócz answer z @Fabrizio Calderan, należy powiedzieć, że można nawet zastosować właściwość bezpośrednio do animation. Więc następujące dokumenty powinny również 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>

0

miałem coś podobnego dzieje się ze mną. Dodałem pozycję: względem elementu, który był animowany i który naprawił to dla mnie.

Powiązane problemy