Animacja CSS z opóźnieniem i kryciem

Próbuję zniknąć w elemencie po 2 sekundach, używając animacji CSS. Kod działa świetnie w nowych przeglądarkach, ale w starych przeglądarkach element pozostanie ukryty z powodu "krycia: 0".Animacja CSS z opóźnieniem i kryciem

Chcę, aby był widoczny w starych przeglądarkach i nie chcę narzucać javascript. Czy można to rozwiązać za pomocą CSS? Na przykład. trochę jak przeglądarki docelowe, które nie obsługują animacji?

CSS:

#element{ 
animation:1s ease 2s normal forwards 1 fadein; 
-webkit-animation:1s ease 2s normal forwards 1 fadein; 
opacity:0 
} 

@keyframes fadein{from{opacity:0} 
to{opacity:1} 
} 

@-webkit-keyframes fadein{from{opacity:0} 
to{opacity:1} 
}

HTML:

<div id=element>som content</div>

Źródło

2015-04-24 user1087110

Tylko nie ustawić początkowy opacity na samego elementu, należy ustawić go w @keyframes:

#element{ 
    -webkit-animation: 3s ease 0s normal forwards 1 fadein; 
    animation: 3s ease 0s normal forwards 1 fadein; 
} 

@keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
} 

@-webkit-keyframes fadein{ 
    0% { opacity:0; } 
    66% { opacity:0; } 
    100% { opacity:1; } 
}

Technika ta trwa opóźnienie off animacji, tak że zaczyna działać natychmiast. Jednak krycie nie zmieni się aż do około 66% w animacji. Ponieważ animacja działa przez 3 sekundy, daje efekt opóźnienia na 2 sekundy i zanikania przez 1 sekundę.

Zobacz przykład pracuje tu: https://jsfiddle.net/75mhnaLt/

Można również zajrzeć do korzystania komentarze warunkowe dla starszych przeglądarek; IE8 i IE9.

Coś jak następuje w HTML:

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->

Następnie można zrobić coś takiego:

.lt-ie9 #element { 
    opacity: 1; 
}

Źródło

2015-04-24 11:48:14

można spróbować to może być Ci pomóc.

HTML

<div>some text</div>

CSS

div{ 
-webkit-animation: fadein 5s linear 1 normal forwards; 
} 

@-webkit-keyframes fadein{ 
from{ 
    opacity: 0; 
} 
to{ 
    opacity: 1; 
} 
}

Źródło

2015-04-24 11:31:51

Od wszystkich głównych przeglądarek support CSS3 animations z chlubnym wyjątkiem IE<10 można używać komentarzy warunkowych w HTML jak tak

<!DOCTYPE html> 
<!--[if lte IE 9]><html class="lte-ie9"><![endif]--> 
<!--[if (gt IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html><!--<![endif]-->

ten sposób można dodać bardziej szczegółowe reguły dla IE<10 pomocą .lte-ie9 classname w określonym selektora

.lte-ie9 #element { 
    opacity: 1; 
    filter : alpha(opacity=100); 
}

nie będę poruszać zamiast na opacity: 0 wewnątrz pierwszej klatki kluczowej jako podstawowej sugestii, ponieważ byłoby to ograniczenie wszystkich animacje, aby mieć animation-delay równa 0 (albo inaczej można zobaczyć rodzaj fouc dla samego elementu)

Źródło

2015-04-24 11:32:45 fcalderan

sugeruję, że można ustawić opacity elementu do 1 za defaul t (w przeglądarkach, które nie obsługują animacji). Następnie rozpocznij animację w punkcie zerowym i użyj klatek kluczowych, aby opóźnić animację.

#element{ 
animation:3s ease 0s normal forwards 1 fadein; 
-webkit-animation:3s ease 0s normal forwards 1 fadein; 
opacity:1 
} 

@keyframes fadein{ 
    0%{opacity:0} 
    80%{opacity:0} 
    100%{opacity:1} 
} 

@-webkit-keyframes fadein{ 
    0%{opacity:0} 
    80%{opacity:0} 
    100%{opacity:1} 
}

http://jsfiddle.net/mg00t86v/2/

Źródło

2015-04-24 11:35:07

Animacja CSS z opóźnieniem i kryciem

Odpowiedz

Powiązane problemy