Probem mit CSS Transitions und Chrome

html.de-Forum HTML, XHTML & CSS
1

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

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

Und hier die CSS-Angaben:

[CODE]@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
}
[/CODE]

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

Besten Dank im Voraus

2

vendor-prefix.

3

Danke,
und wo genau müsste ich die einsetzen?

4

Was sagt Google zu ‚css3 animation vendor-prefix‘?

5

Auch mit Prefixes scheint es nicht zu funzen:
http://jb-design-for-web.de/test/css3-js/css-test.html

[CODE]@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;
}[/CODE]

6

Ich habe jetzt auch mit @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } probiert.

Jetzt startet zwar die Transition, aber leider fällt der Content danach wieder auf den Ausgangszustand (opacity: 0;) zurück.

7

Also wenn ich mir die Comments im Code anschaue, dann sieht das ziemlich nach zusammengeklickt aus, und die Charset Anweisung in der CSS Datei lässt sogar auf Dreamweaver schließen. :wink:

Falls du der Webdesigner hinter der URL bist und gerade eine Seite für einen Kunden entwickelst, dann nimm dir 1-2 Tage Auszeit von deinem Projekt und beschäftige dich intensiv CSS3 Animations. Das mache ich auch, wenn ich mit einer erstmalig mit einer neuen Technologie in Berührung komme und dabei auf Hürden stoße.

8

Alles klar jetzt funktioniert es.

-webkit-animation-fill-mode: forwards;

fehlte.

Danke für deine Hilfe, Tronjer.