Probem mit CSS Transitions und Chrome

[dn3d_fanboy]

Hallo,
ich möchte eine Seite mit CSS-Transitions laden, d.h. der Inhalt wird per CSS eingeblendet.

Unter Firefox und IE läuft das auch ohne Probleme, nur Chrome und Opera (ich denke auch Safari) laden den Inhalt einfach nicht.
Schalte ich die Klasse für die Transitions aus funktioniert es.

Hier mal der Link zur Seite:

1.) mit Transition-Klassen:
http://jb-design-for-web.de/test/css3-js/css-test.html

2. ohne Transition:
http://jb-design-for-web.de/test/css3-js/css-test-2.html

Und hier die CSS-Angaben:

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    animation-duration:2s;
    animation-delay: 1.5s
}

.fade-in2 {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    animation-duration:2.5s;
    animation-delay: 3.5s
}

.fade-in3 {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    animation-duration:3s;
    animation-delay: 4.5s
}

Hat irgendwer eine Ahnung warum das so geschieht und hat villeicht einen Lösungsansatz für mich?

Besten Dank im Voraus

 

[manfred_hst]

hallo fanboy,
schau mal hier: http://css-tricks.com/snippets/css/keyframe-animation-syntax/
vielleicht hilft das.
grüße
Manfred
oder dies

 

[dn3d_fanboy]

Hallo Manfred und vielen Dank für die Links,

leider steige ich da jetzt nicht ganz durch.
Ich habe allerdings schon gemerkt, dass die Prefixes fehlten. Nach der Änderung startet unter Chrome zwar die Transition, der Content fällt danach (also bei opacity:1) wieder auf den Ausgangszustand (opycity: 0) zurück.

Hier nochmal der Link:

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



.fade-in{
opacity:0;
/* make things invisible upon start */
/*animation*/
-webkit-animation:fadeIn ease-in 1;
   -moz-animation:fadeIn ease-in 1;
    -ms-animation:fadeIn ease-in 1;
     -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
animation-fill-mode:forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
/*animation-duration*/
-webkit-animation-duration:2s;
   -moz-animation-duration:2s;
    -ms-animation-duration:2s;
     -o-animation-duration:2s;
        animation-duration:2s;
/*animation-delay*/
-webkit-animation-delay:1.5s;
   -moz-animation-delay:1.5s;
    -ms-animation-delay:1.5s;
     -o-animation-delay:1.5s;
        animation-delay:1.5s;
}
.fade-in2{
opacity:0;
/* make things invisible upon start */
/*animation*/
-webkit-animation:fadeIn ease-in 1;
   -moz-animation:fadeIn ease-in 1;
    -ms-animation:fadeIn ease-in 1;
     -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
animation-fill-mode:forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
/*animation-duration*/
-webkit-animation-duration:2.5s;
   -moz-animation-duration:2.5s;
    -ms-animation-duration:2.5s;
     -o-animation-duration:2.5s;
        animation-duration:2.5s;
/*animation-delay*/
-webkit-animation-delay:3.5s;
   -moz-animation-delay:3.5s;
    -ms-animation-delay:3.5s;
     -o-animation-delay:3.5s;
        animation-delay:3.5s;
}
.fade-in3{
opacity:0;
/* make things invisible upon start */
/*animation*/
-webkit-animation:fadeIn ease-in 1;
   -moz-animation:fadeIn ease-in 1;
    -ms-animation:fadeIn ease-in 1;
     -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
/* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
animation-fill-mode:forwards;
/* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
/*animation-duration*/
-webkit-animation-duration:3s;
   -moz-animation-duration:3s;
    -ms-animation-duration:3s;
     -o-animation-duration:3s;
        animation-duration:3s;
/*animation-delay*/
-webkit-animation-delay:4.5s;
   -moz-animation-delay:4.5s;
    -ms-animation-delay:4.5s;
     -o-animation-delay:4.5s;
        animation-delay:4.5s;
}

http://jb-design-for-web.de/test/css3-js/css-test.html

 

[dn3d_fanboy]

Alles klar jetzt funktioniert es.

-webkit-animation-fill-mode: forwards;

fehlte.

Danke für deine Hilfe, Manfred.

 

[manfred_hst]

hallo fanboy,
vielleicht hilft dies:

• animation-iteration-count: Wie oft die Animation wiederholt werden soll. iteration-count:1 ist die Vorgabe.