1. Zuhause
  2. Frage und Antwort
  3. CSS Animation nicht looping

CSS Animation nicht looping

2016-12-07 3 views
0

Ich habe eine vollständige Bildhintergrund Folie Animation funktioniert gut bis zum letzten Bild. Wenn die Animation zum letzten Bild gelangt, wird sie nicht neu gestartet.CSS Animation nicht looping

Ich habe unendlich eingestellt, aber es funktioniert immer noch nicht. Wenn ich die Deckkraft ändere funktioniert es aber Bilder werden gemischt und der Effekt ist nicht schön.

Wie kann ich meine CSS auf Folie alle 10s mit einer minimalen Deckkraft zwischen den Bildern und der letzten Schleife zum ersten am Ende der Animation beheben?

CSS

ol,ul { 
list-style:none; 
} 

.cb-slideshow, 
.cb-slideshow:after { 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0px; 
left: 0px; 
z-index: 0; 
} 
.cb-slideshow:after { 
content: ''; 
background: transparent url(../images/pattern.png) repeat top left; 
} 
.cb-slideshow li span { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0px; 
left: 0px; 
color: transparent; 
background-size: cover; 
background-position: 50% 50%; 
background-repeat: none; 
opacity: 0; 
z-index: 0; 
-webkit-backface-visibility: hidden; 
-webkit-animation: imageAnimation 60s linear infinite 0s; 
-moz-animation: imageAnimation 60s linear infinite 0s; 
-o-animation: imageAnimation 60s linear infinite 0s; 
-ms-animation: imageAnimation 60s linear infinite 0s; 
animation: imageAnimation 60s linear infinite 0s; 
} 
.cb-slideshow li:nth-child(1) span { 
background-image: url(../images/slide-1.jpg) 
} 
.cb-slideshow li:nth-child(2) span { 
background-image: url(../images/slide-2.jpg); 
-webkit-animation-delay: 10s; 
-moz-animation-delay: 10s; 
-o-animation-delay: 10s; 
-ms-animation-delay: 10s; 
animation-delay: 10s; 
} 
.cb-slideshow li:nth-child(3) span { 
background-image: url(../images/slide-3.jpg); 
-webkit-animation-delay: 20s; 
-moz-animation-delay: 20s; 
-o-animation-delay: 20s; 
-ms-animation-delay: 20s; 
animation-delay: 20s; 
} 
.cb-slideshow li:nth-child(4) span { 
background-image: url(../images/slide-1.jpg); 
-webkit-animation-delay: 30s; 
-moz-animation-delay: 30s; 
-o-animation-delay: 30s; 
-ms-animation-delay: 30s; 
animation-delay: 30s; 
} 
.cb-slideshow li:nth-child(5) span { 
background-image: url(../images/slide-2.jpg); 
-webkit-animation-delay: 40s; 
-moz-animation-delay: 40s; 
-o-animation-delay: 40s; 
-ms-animation-delay: 40s; 
animation-delay: 40s; 
} 
.cb-slideshow li:nth-child(6) span { 
background-image: url(../images/slide-3.jpg); 
-webkit-animation-delay: 50s; 
-moz-animation-delay: 50s; 
-o-animation-delay: 50s; 
-ms-animation-delay: 50s; 
animation-delay: 50s; 
} 

@keyframes imageAnimation { 
0% { opacity: 0; 
    animation-timing-function: ease-in; } 
25% { opacity: 1; 
    animation-timing-function: ease-out; } 
50% { opacity: 1 } 
75% { opacity: 0 } 
100% { opacity: 0 } 
} 
@-webkit-keyframes imageAnimation { 
0% { opacity: 0; 
-webkit-animation-timing-function: ease-in; } 
25% { opacity: 1; 
    -webkit-animation-timing-function: ease-out; } 
50% { opacity: 1 } 
75% { opacity: 0 } 
100% { opacity: 0 } 
} 
@-moz-keyframes imageAnimation { 
0% { opacity: 0; 
-moz-animation-timing-function: ease-in; } 
25% { opacity: 1; 
    -moz-animation-timing-function: ease-out; } 
50% { opacity: 1 } 
75% { opacity: 0 } 
100% { opacity: 0 } 
} 
@-o-keyframes imageAnimation { 
0% { opacity: 0; 
-o-animation-timing-function: ease-in; } 
25% { opacity: 1; 
    -o-animation-timing-function: ease-out; } 
50% { opacity: 1 } 
75% { opacity: 0 } 
100% { opacity: 0 } 
} 
@-ms-keyframes imageAnimation { 
0% { opacity: 0; 
-ms-animation-timing-function: ease-in; } 
25% { opacity: 1; 
    -ms-animation-timing-function: ease-out; } 
50% { opacity: 1 } 
75% { opacity: 0 } 
100% { opacity: 0 } 
} 


.no-cssanimations .cb-slideshow li span{ 
    opacity: 1; 
} 

@media screen and (max-width: 1140px) { 
.cb-slideshow li div h3 { font-size: 140px } 
} 
@media screen and (max-width: 600px) { 
.cb-slideshow li div h3 { font-size: 80px } 
}

HTML

<ul class="cb-slideshow"> 
    <li><span></span></li> 
    <li><span></span></li> 
    <li><span></span></li> 
    <li><span></span></li> 
    <li><span></span></li> 
    <li><span></span></li> 
</ul>

Quelle

2016-12-07 ma.gr

Antwort

0

Es funktioniert gut. Animieren mit Schleife, Sie haben lange Intervalle für Animation über 60s, 50s und so weiter gegeben. ich denke thats, warum Sie die Schleife überhaupt nicht sehen ... so ändern Sie Animation wie 6s oder 10s als Ihre Beschreibung. es funktioniert gut

ol,ul { 
 
list-style:none; 
 
} 
 

 
.cb-slideshow, 
 
.cb-slideshow:after { 
 
position: fixed; 
 
width: 100%; 
 
height: 100%; 
 
top: 0px; 
 
left: 0px; 
 
z-index: 0; 
 
} 
 
.cb-slideshow:after { 
 
content: ''; 
 
background: transparent url(../images/pattern.png) repeat top left; 
 
} 
 
.cb-slideshow li span { 
 
width: 100%; 
 
height: 100%; 
 
position: absolute; 
 
top: 0px; 
 
left: 0px; 
 
color: transparent; 
 
background-size: cover; 
 
background-position: 50% 50%; 
 
background-repeat: none; 
 
opacity: 0; 
 
z-index: 0; 
 
-webkit-backface-visibility: hidden; 
 
-webkit-animation: imageAnimation 6s linear infinite 0s; 
 
-moz-animation: imageAnimation 6s linear infinite 0s; 
 
-o-animation: imageAnimation 6s linear infinite 0s; 
 
-ms-animation: imageAnimation 6s linear infinite 0s; 
 
animation: imageAnimation 6s linear infinite 0s; 
 
} 
 
.cb-slideshow li:nth-child(1) span { 
 
background-image: url('https://placeholdit.imgix.net/~text?txtsize=77&bg=ff0000&txtclr=ffffff&txt=1230x373&w=1230&h=373') 
 
} 
 
.cb-slideshow li:nth-child(2) span { 
 
background-image: url('https://placeholdit.imgix.net/~text?txtsize=77&bg=00ff00&txtclr=ffffff&txt=1230x373&w=1230&h=373'); 
 
-webkit-animation-delay: 1s; 
 
-moz-animation-delay: 1s; 
 
-o-animation-delay: 1s; 
 
-ms-animation-delay: 1s; 
 
animation-delay: 1s; 
 
} 
 
.cb-slideshow li:nth-child(3) span { 
 
background-image: url('https://placeholdit.imgix.net/~text?txtsize=77&bg=0000ff&txtclr=ffffff&txt=1230x373&w=1230&h=373'); 
 
-webkit-animation-delay: 2s; 
 
-moz-animation-delay: 2s; 
 
-o-animation-delay: 2s; 
 
-ms-animation-delay: 2s; 
 
animation-delay: 2s; 
 
} 
 
.cb-slideshow li:nth-child(4) span { 
 
background-image: url('https://placeholdit.imgix.net/~text?txtsize=77&bg=ffff00&txtclr=ffffff&txt=1230x373&w=1230&h=373'); 
 
-webkit-animation-delay: 3s; 
 
-moz-animation-delay: 3s; 
 
-o-animation-delay: 3s; 
 
-ms-animation-delay: 3s; 
 
animation-delay: 3s; 
 
} 
 
.cb-slideshow li:nth-child(5) span { 
 
background-image: url('https://placeholdit.imgix.net/~text?txtsize=77&bg=00ffff&txtclr=ffffff&txt=1230x373&w=1230&h=373'); 
 
-webkit-animation-delay: 4s; 
 
-moz-animation-delay: 4s; 
 
-o-animation-delay: 4s; 
 
-ms-animation-delay: 4s; 
 
animation-delay: 4s; 
 
} 
 
.cb-slideshow li:nth-child(6) span { 
 
background-image: url('https://placeholdit.imgix.net/~text?txtsize=77&bg=000000&txtclr=ffffff&txt=1230x373&w=1230&h=373'); 
 
-webkit-animation-delay: 5s; 
 
-moz-animation-delay: 5s; 
 
-o-animation-delay: 5s; 
 
-ms-animation-delay: 5s; 
 
animation-delay: 5s; 
 
} 
 

 
@keyframes imageAnimation { 
 
0% { opacity: 0; 
 
    animation-timing-function: ease-in; } 
 
25% { opacity: 1; 
 
    animation-timing-function: ease-out; } 
 
50% { opacity: 1 } 
 
75% { opacity: 0 } 
 
100% { opacity: 0 } 
 
} 
 
@-webkit-keyframes imageAnimation { 
 
0% { opacity: 0; 
 
-webkit-animation-timing-function: ease-in; } 
 
25% { opacity: 1; 
 
    -webkit-animation-timing-function: ease-out; } 
 
50% { opacity: 1 } 
 
75% { opacity: 0 } 
 
100% { opacity: 0 } 
 
} 
 
@-moz-keyframes imageAnimation { 
 
0% { opacity: 0; 
 
-moz-animation-timing-function: ease-in; } 
 
25% { opacity: 1; 
 
    -moz-animation-timing-function: ease-out; } 
 
50% { opacity: 1 } 
 
75% { opacity: 0 } 
 
100% { opacity: 0 } 
 
} 
 
@-o-keyframes imageAnimation { 
 
0% { opacity: 0; 
 
-o-animation-timing-function: ease-in; } 
 
25% { opacity: 1; 
 
    -o-animation-timing-function: ease-out; } 
 
50% { opacity: 1 } 
 
75% { opacity: 0 } 
 
100% { opacity: 0 } 
 
} 
 
@-ms-keyframes imageAnimation { 
 
0% { opacity: 0; 
 
-ms-animation-timing-function: ease-in; } 
 
25% { opacity: 1; 
 
    -ms-animation-timing-function: ease-out; } 
 
50% { opacity: 1 } 
 
75% { opacity: 0 } 
 
100% { opacity: 0 } 
 
} 
 

 

 
.no-cssanimations .cb-slideshow li span{ 
 
    opacity: 1; 
 
} 
 

 
@media screen and (max-width: 1140px) { 
 
.cb-slideshow li div h3 { font-size: 140px } 
 
} 
 
@media screen and (max-width: 600px) { 
 
.cb-slideshow li div h3 { font-size: 80px } 
 
}
<ul class="cb-slideshow"> 
 
    <li><span></span></li> 
 
    <li><span></span></li> 
 
    <li><span></span></li> 
 
    <li><span></span></li> 
 
    <li><span></span></li> 
 
    <li><span></span></li> 
 
</ul>

Quelle

2016-12-07 16:28:02 jafarbtech

Verwandte Themen

 Verwandte Themen