Problem mit CSS3 animations

[simonpicos]

Hallo zusammen

Ich stehe aktuell vor einem Problem: Ich plane eine fullscreen-slideshow zu machen, die z.B. im Hintergrund einer Seite abläuft. Das ganze möchte ich nur mit CSS realisieren. (Kein js).
So soll es aussehen: Ich habe 4 Bilder für welches jeweils eine Animation in dauerschleife durchläuft. Die Sichtbarkeitszeiten der Bilder sind immer versetzt. Schematisch sieht das so aus:

X---
-X--
--X-
---X

Das Problem ist jetzt, dass der übergang vom letzten zum ersten Bild nur abgehackt funktioniert. Hat jemand ne Idee wie ich den auch flüssig bekomme? Ich steh grad ein wenig aufem Schlauch.

Hier das Projekt:

 

[ad86]

AW: Problem mit CSS3 animations

Hi,

möglicherweise deswegen:

@keyframes animate-img-4{
    0%{
        opacity: 0;
    }
    70%{
        opacity: 0
    }
    75%{
        opacity: 1;
    }
    [COLOR="Red"]99.9%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }[/COLOR]
}

Du springst innerhalb von weniger als 0,4 Sekunden von 1 auf 0. Sollte wohl ein bisschen länger sein. Bei Dir also 10%.

MFg ad86

 

[simonpicos]

AW: Problem mit CSS3 animations

Hi,

möglicherweise deswegen:

@keyframes animate-img-4{
    0%{
        opacity: 0;
    }
    70%{
        opacity: 0
    }
    75%{
        opacity: 1;
    }
    [COLOR=Red]99.9%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }[/COLOR]
}

Du springst innerhalb von weniger als 0,4 Sekunden von 1 auf 0. Sollte wohl ein bisschen länger sein. Bei Dir also 10%.

MFg ad86

Danke schon einmal für deine Antwort. Das hatte ich auch erst, habe dann aber bewusst erstmal die kurze version genommen, weil ich sonst tlw eine weißfläche hätte.. Ich zeigs dir gleich mal.

Hier:

 

[ad86]

AW: Problem mit CSS3 animations

Hi,

naja, wenn kein Bild mehr da ist, bleibt ja nur noch die weiße Hintergrundfarbe.
Möglich wäre es, wenn Du alle Bilder am Anfang eingeblendet lässt (das erste sollte oben sein). Dann lässt Du das erste bei 20% ausfaden, bei 45% das 2., bei 70% das dritte, bei 90% lässt Du das ERSTE wieder einfaden, so das es bei 100% sichtbar ist. Das vierte (bzw. letzte) bleibt immer bestehen.
Wichtig! Bei 0% sollte die Transparenz bei allen auf 1 stehen.

Oder andere Möglichkeit, wenn Du unbedingt aus- und einfaden zur gleichen Zeit haben möchtest:
0% Sichtbar nur 1.
20-30% Ausfaden 1., Einfaden 2.
40-50% Ausfaden 2., Einfaden 3.
60-70% Ausfaden 3., Einfaden 4.
90-100% Ausfaden 4., Einfaden 1.

Getestet habe ich es aber nicht.
Mfg ad86

 

[cebito]

AW: Problem mit CSS3 animations

Benutze nur eine Animation und steuer es mit delay und ease-in und -out:

ul li{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    height:auto !important;
    height:100%;
        opacity:0;
    overflow: hidden !important;
        -moz-animation: animate-img 40s linear infinite 0s;
}

ul li:first-of-type{
    background-image: url("http://labs.simonpicos.hostingsociety.com/fullscreen-slideshow/lang/img1.jpg");
    background-size: cover;
    -moz-animation-delay: 0s;
}

ul li:nth-of-type(2){
    background-image: url("http://labs.simonpicos.hostingsociety.com/fullscreen-slideshow/lang/img2.jpg");
    background-size: cover;
    -moz-animation-delay: 10s;
}

ul li:nth-of-type(3){
    background-image: url("http://labs.simonpicos.hostingsociety.com/fullscreen-slideshow/lang/img3.jpg");
    background-size: cover;
    -moz-animation-delay: 20s;
}

ul li:nth-of-type(4){
    background-image: url("http://labs.simonpicos.hostingsociety.com/fullscreen-slideshow/lang/img4.jpg");
    background-size: cover;
    -moz-animation-delay: 30s;
}

@-moz-keyframes animate-img{
    0%{
        opacity: 0;
                -moz-animation-timing-function: ease-in;
    }
    5%{
        opacity: 1;
    }
    30%{
        opacity: 1;
        -moz-animation-timing-function: ease-out;
    }
    35%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

 

[cebito]

AW: Problem mit CSS3 animations

Hab dir mal ein Beispiel gemacht:

 

[simonpicos]

AW: Problem mit CSS3 animations

Ey, was klaust du mir die Idee mit den (ich glaube die heißen sinedots)

Nein Spaß, danke dir, funktioniert
(Kommt heut abend, wenns fertig ist innen Showroom )

Ach übrigens, doppelposts sind verboten :lol:

Grad gefunden: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ geiler Artikel !

 

[cebito]

AW: Problem mit CSS3 animations

Ach übrigens, doppelposts sind verboten :lol:

:mrorange: