Got a small img slideshow running with animation/keyframes, it has 4 images running 6 seconds each on a 24s infinite loop,
The problem is that when it runs through once, the transition is fine, once it has gone through the 4 images and repeats, there is a good 2-3 seconds after an image fades out and the next one fades in.
First time using animation and keyframes so i'm not 100% what i've done wrong. The slide show is running in a div called .slideshow
I've taken out most prefixes for space and readability:
/* CSS */
.slideshow figure:nth-child(4) {
-webkit-animation: xfade 24s 0s infinite;
animation: xfade 24s 0s infinite;
}
.slideshow figure:nth-child(3) {
-webkit-animation: xfade 24s 6s infinite;
animation: xfade 24s 6s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: xfade 24s 12s infinite;
animation: xfade 24s 12s infinite;
}
.slideshow figure:nth-child(1) {
-webkit-animation: xfade 24s 18s infinite;
animation: xfade 24s 18s infinite;
}
#keyframes "xfade" {
0% {
opacity: 1;
}
14% {
opacity: 1;
}
16% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Not a duplicate, having a problem with a single image slideshow that loops fine for the first 24s, then a major 2-3 gap between images every time after..
Try changing the xfade animation to
#keyframes "xfade" {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Logically since the images are 4 the cycle should be 25%,
Related
This is my first question on this platform.
I am trying to make anki card that shows a question for a number of seconds then I need it to fade out.
this is the code that I have found.
#-webkit-keyframes fadeIn {
100%,0%{opacity:.5;}
0%,0%{opacity:1;}
}
.fade-out {
font-size:20px;
color: dodgerblue;
background:white;
padding:10px;
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-webkit-animation-duration:2s;
-webkit-animation-delay:4s;
This kind of stuff is usually easy to just google, but anyways this is a solution that will work perfectly
.fader {
animation: fadeOut ease 8s;
-webkit-animation: fadeOut ease 8s;
-moz-animation: fadeOut ease 8s;
-o-animation: fadeOut ease 8s;
-ms-animation: fadeOut ease 8s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
<h1 class="fader">
Hey!
</h1>
You can make an animation with the #keyframes tag. For instance
#keyframes fade-out {
100%{
opacity: 0%;
}
}
and then also in your CSS you have something like this:
.your-class{
animation: fade-out 3s linear 10s 1;
animation-fill-mode: forwards;
}
And then in your HTML you have this:
<div class="your-class">What is 1+1?</div>
The values in the CSS mean that the "fade-out" animation will be played in a 3s time and a linear animation. The 10s mean that after 10s the animation will play, so it means that the card will disappear after 10s. and the "1" means it will only play 1 time, this is optional since 1 is the default value.
animation-fill-mode means that the value that's in the animation (opacity: 0%) will remain and only goes away when you refresh the page for instance. It will overtake the default value which is normally 100%;
Hoped this helped you.
This question already has answers here:
Maintaining the final state at end of a CSS animation
(5 answers)
Closed 2 years ago.
Is there a CSS only way to fade-out this text as below and have it stay hidden once the animation completes? It currently fades out, then appears again. I have tried adding display: none (as well as height: 0px, which isn't really what I want), but the issue remains - it re-appears once the animation completes.
Happy to use some JavaScript to do this (there is a stack overflow answer explaining how to listen out for the end of the animation event), but pure CSS is preferred.
.fade-out {
animation: fadeOut ease 5s;
-webkit-animation: fadeOut ease 5s;
-moz-animation: fadeOut ease 5s;
-o-animation: fadeOut ease 5s;
-ms-animation: fadeOut ease 5s;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-ms-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>
Use animation-fill-mode: forwards; for that purpose:
.fade-out {
animation: fadeOut ease 5s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<h1 class="fade-out">hello</h1>
I'd like to animate 2 images with css whereby 1 starts and stays for 5 secs and the other follows and they both stay for 5 more seconds together and it all starts again in an infinite loop. I'm doing it once but once it goes through the first loop, they all animate at the same time without the second images delay. Please view my code below:
CSS:
img.coke {
position: relative;
animation-name: FadeInOut;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
img.fanta {
position: relative;
opacity:0;
animation-name: FadeIn;
animation-duration: 5s;
animation-delay: 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes FadeInOut {
0% {
opacity:0;
}
50% {
opacity:1;
}
100% {
opacity:1;
}
}
#keyframes FadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<div id ="imgo">
<img class = "coke" src="http://media.wktv.com/images/AP_985452110986.png" />
<img class ="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
As you have noted the animation-delay just works onces to delay the time the animation starts:
Specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.
But you can use the logic you already have controlling the opacity state based on the % of the animation:
img {
max-height: 200px;
}
img.coke {
position: relative;
animation: FadeInOut 2s infinite alternate ease-in-out;
}
img.fanta {
position: relative;
opacity: 0;
animation: FadeIn 2s infinite alternate ease-in-out;
}
#keyframes FadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes FadeIn {
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="imgo">
<img class="coke" src="http://media.wktv.com/images/AP_985452110986.png" />
<img class="fanta" src="http://www.coca-colaproductfacts.com/content/dam/productfacts/us/productDetails/ProductImages/Fanta_12.png" />
</div>
.coke {
height: 100px;
opacity: 0;
-webkit-animation: example1 10s infinite; /* Safari 4+ */
-moz-animation: example1 10s infinite; /* Fx 5+ */
-o-animation: example1 10s infinite; /* Opera 12+ */
animation: example1 10s infinite; /* IE 10+, Fx 29+ */
}
.fanta {
height: 100px;
opacity: 0;
-webkit-animation: example2 10s infinite; /* Safari 4+ */
-moz-animation: example2 10s infinite; /* Fx 5+ */
-o-animation: example2 10s infinite; /* Opera 12+ */
animation: example2 10s infinite; /* IE 10+, Fx 29+ */
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example1 {
10% {opacity: 0;}
15% {opacity: 1;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes example1 {
10% {opacity: 0;}
15% {opacity: 1;}
100% {opacity: 1;}
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example2 {
45% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
/* Standard syntax */
#keyframes example2 {
45% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 1;}
}
Try to manipulate animation percentages
Example: https://jsfiddle.net/o4226gmd/
I made an CSS slideshow with 3 images animated by keyframes that makes a fade in/out effect. So far, so well. But there's a problem with the animation on the second loop of the slideshow.
Im going to explain my best: the first loop animation works perfectly, but once the first image come back again there's a fade to white on all the slides that I like to avoid.
I don't understand why the first loop works perfectly and then the other loops have this fade to white issue. You can see this problem on the Snippet.
Help is really apreciated!
.imgbox{
display: flex;
align-items: center;
height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 3;
-webkit-animation: slideshow 15s linear 0s infinite;
-moz-animation: slideshow 15s linear 0s infinite;
-ms-animation: slideshow 15s linear 0s infinite;
-o-animation: slideshow 15s linear 0s infinite;
animation: slideshow 15s linear 0s infinite;
}
#img2{
position: absolute;
z-index: 2;
-webkit-animation: slideshow 15s linear 5s infinite;
-moz-animation: slideshow 15s linear 5s infinite;
-ms-animation: slideshow 15s linear 5s infinite;
-o-animation: slideshow 15s linear 5s infinite;
animation: slideshow 15s linear 5s infinite;
}
#img3{
position: absolute;
z-index: 1;
-webkit-animation: slideshow 15s linear 10s infinite;
-moz-animation: slideshow 15s linear 10s infinite;
-ms-animation: slideshow 15s linear 10s infinite;
-o-animation: slideshow 15s linear 10s infinite;
animation: slideshow 15s linear 10s infinite;
}
#-webkit-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#-moz-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#-ms-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#-o-keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
#keyframes slideshow {
25% { opacity: 1;}
30% { opacity: 0;}
95% { opacity: 0;}
100% { opacity: 1;}
}
<div id="img1" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg');">
</div>
<div id="img2" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg');">
</div>
<div id="img3" class="imgbox" style="background-image: url('http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg');">
</div>
.imgbox{
display: flex;
align-items: center;
height: 100%;
width: 100%;
background-position: center center;
background-size: cover;
}
#img1{
position: absolute;
z-index: 3;
animation: xfade 15s -0s infinite;
animation-timing-function: ease-in-out;
}
#img2{
position: absolute;
z-index: 2;
animation: xfade 15s -5s infinite;
animation-timing-function: ease-in-out;
}
#img3{
position: absolute;
z-index: 1;
animation: xfade 15s -10s infinite;
animation-timing-function: ease-in-out;
}
#keyframes xfade{
0% {opacity: 0;}
20% {opacity: 1;}
33% {opacity: 1;}
53% {opacity: 0;}
100% {opacity: 0;}
}
I just set up a jsfiddle with an updated version for you.
https://jsfiddle.net/87axbx1o/
Let me know if that works well for you
This is what I tried:
css code:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 100px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
Now what I need, every once rotational completed, then again start to move from right to left. I need some distance for every rotational completed.
Can somebody help to fix this?
Thanks in advance.
http://jsfiddle.net/6d6xa65n/4/
There isn't any delay between iterations in css3 other than animation-delay, which is used at the beginning, however you can use jQuery for delay. For direction from right to left change:
animation: animatedBackground 40s linear infinite alternate;
-ms-animation: animatedBackground 40s linear infinite alternate;
-moz-animation: animatedBackground 40s linear infinite alternate;
-webkit-animation: animatedBackground 40s linear infinite alternate;
If you want to add delay change to:
animation: animatedBackground 40s 5s linear infinite alternate;
-ms-animation: animatedBackground 40s 5s linear infinite alternate;
-moz-animation: animatedBackground 40s 5s linear infinite alternate;
-webkit-animation: animatedBackground 40s 5s linear infinite alternate;
Or add this, which will give you a delay at the end and beginning if you mean delay by "distance":
background-image: url('http://s10.postimg.org/noxw294zd/banner.png');
animation: animatedBackground 5s linear infinite alternate;
-ms-animation: animatedBackground 5s linear infinite alternate;
-moz-animation: animatedBackground 5s linear infinite alternate;
-webkit-animation: animatedBackground 5s linear infinite alternate;
}
/* Put your css in here */
#keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
#-webkit-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}
#-moz-keyframes animatedBackground {
0% { left: 0; }
25% { left: 0; }
50% {left: -2000px;}
100% { left: -2000px; }
}