Antworten auf deine Fragen:
Neues Thema erstellen

Problem mit CSS3 animations

simonpicos

Mod | Forum

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:
 

A

ad86

Guest

AW: Problem mit CSS3 animations

Hi,

möglicherweise deswegen:
Code:
@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

Mod | Forum

AW: Problem mit CSS3 animations

Hi,

möglicherweise deswegen:
Code:
@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:
 
Zuletzt bearbeitet:
A

ad86

Guest

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
 
Zuletzt bearbeitet von einem Moderator:

cebito

undefined

AW: Problem mit CSS3 animations

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

Code:
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;
    }
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben