Im trying to do a crossfade between 3 images, using css.
Im new to #keyframes, so im having trouble to make it work.
Below, is the html and css code snippets:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cf">
<img class="bottom" src="assets/1.png" />
<img class="top" src="assets/2.png" />
<img class="bottom" src="assets/3.png">
</div>
</body>
</html>
style.css:
#cf {
position: relative;
height: auto;
width: auto;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 6s;
animation-direction: alternate;
}
#cf img:nth-of-type(1) {
animation-delay: 4s;
}
#cf img:nth-of-type(2) {
animation-delay: 2s;
}
#cf img:nth-of-type(3) {
animation-delay: 0;
}
#keyframes cf3FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Right now, animation is acting weird, flashing from one image to another, at random animation times.
You are close to the correct solution. animation-direction: alternate; causes the animation to "run backwards" once it reached 100%. With the odd times defined in your keyframe, this leads to uneven transitions:
keyframe 0% 17% 25% 92% 100% 92% 25% 17% 0% 17% ... infinite
state :1 1 0 0 1 0 0 1 1 1
time in state : 17% 62% 0% 62% 34%
transition time: 8% 8% 8% 8%
Simplify the keyframe to even times and you should be fine. With an even time distribution you don't even need the animation-direction at all. You can easily adjust the times by changing animation-duration of the keyframe and animation-delay for your images.
#cf img {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
/* if you only want to cycle a finite amount of times,
simply change 'infinite' with # of iterations you need */
animation-iteration-count: infinite;
animation-duration: 6s;
animation-direction: alternate; /* not strictly necessary */
position:absolute;
}
#cf img:nth-of-type(1) {
animation-delay: 5s;
}
#cf img:nth-of-type(2) {
animation-delay: 3s;
}
#cf img:nth-of-type(3) {
/* add some delay for the first picture as well */
animation-delay: 1s;
}
#keyframes cf3FadeInOut {
/* distributing times evenly */
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="cf">
<img class="bottom" src="http://lorempixel.com/200/100/sports/1" />
<img class="top" src="http://lorempixel.com/200/100/sports/2" />
<img class="bottom" src="http://lorempixel.com/200/100/sports/3">
</div>
Strictly spoken, the first two transitions are marginally different since they transition to a picture of opacity:1 instead of a fading picture and have slightly different times, but the difference is barely visible and imo not worth the effort compared to the resulting complication in code.
Related
I created a crossfade using CSS, but I am having difficulties with the timing. I want 4 seconds delay or 4 seconds between each image but it's not working.
#cf {
position:absolute;
margin:0 auto;
width: 100%;
height: 100%;
top: 0;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index: -1;
}
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf img {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}
#cf img:nth-of-type(1) { /* Wakame */
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
animation-delay: 24s;
}
#cf img:nth-of-type(2) { /*Meraki */
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
animation-delay: 20s;
}
#cf img:nth-of-type(3) { /* Trabzoni */
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
animation-delay: 16s;
}
#cf img:nth-of-type(4) { /* SPS */
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
#cf img:nth-of-type(5) { /* Balad */
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
#cf img:nth-of-type(6) { /* Wesal */
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
<div id="cf">
<img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
<img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
<img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
<img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
<img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
<img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
</div>
Also, besides the timing, when the images crossfade, after the second image, it keeps going back to the first while the rest won't display or very quickly display and fade.
I want 4 seconds delay or 4 seconds between each image but it's not
working
In order to get the timing right, you need to keep in mind some calculations.
Determine how long each image should take to fade in. Let's say you want 1 second for the image to fade in from 0 opacity to 1.
Determine how long each image should remain visible. Let's say you want the image to stay at 1 opacity for 4 seconds.
Determine how long should the next image take to start. This will become the interval between the two images. This should be greater than what you got at step #2. You had 1s to show up, and 4s to keep it shown. So this would be at least 5 seconds. Apply this in increments to each image's animation-delay.
Multiply this number by the total number of your images. This will become to total animation-duration. In this case, you calculate 5s in step #3 and you have 6 images. So your animation-duration will be 5 x 6 = 30 i.e 30 seconds.
Divide 100% by the number you got in step #4. This will become the keyframes. In this case, you have 30s of total animation-duration. So your keyframes will be in steps of 100% / 30 = 3.33 i.e 3.33% of each keyframe. This each frame will represent 1 second.
Extrapolate your step #1 and #2 values on these frames. i.e. for 3.33% you will have opacity: 1 to show the image after 1 second. Then for each of 6.66%, 9.99%, and 13.33% it will remain as opacity:1. i.e. for 4 seconds starting at 0, the image will remain visible. Then on frame 16.65 revert the opacity back to 0. i.e. at 5th second the image will fade out. And then shall remain hidden until 100% i.e. until all remaining 25 seconds.
Putting this all together, you get:
From Step #3:
#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }
From Step #4:
#cf img { animation: fader 30s linear infinite; }
And, from Steps #5 and #6 (extrapolated from steps #1 and #2):
#keyframes fader {
0% { opacity: 0; }
03.33% { opacity: 1; }
06.66% { opacity: 1; }
09.99% { opacity: 1; }
13.33% { opacity: 1; }
16.65% { opacity: 0; }
100% { opacity: 0; }
}
That's it. Here is the complete snippet:
Snippet:
html, body { height: 100%; width: 100%; overflow: hidden; }
#cf {
position: relative; margin: 0 auto;
width: 100%; height: 100%;
}
#cf img {
position: absolute; left: 0; top: 0; opacity: 0;
animation: fader 30s linear infinite;
}
#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }
#keyframes fader {
0% { opacity: 0; }
03.33% { opacity: 1; }
06.66% { opacity: 1; }
09.99% { opacity: 1; }
13.33% { opacity: 1; }
16.65% { opacity: 0; }
100% { opacity: 0; }
}
<div id="cf">
<img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
<img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
<img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
<img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
<img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
<img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
</div>
This question already has an answer here:
Crossfade two images repeatedly after showing for 10 seconds
(1 answer)
Closed 5 years ago.
I want to make two images fade smoothly between them.
Images appear on browser, but animation does not work.
I think this issue is related to #keyframes or #cf3 img.top sections... The other sections seems to work.. Tested on chrome.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cf">
<img class="bottom" src="assets/1.png" />
<img class="top" src="assets/2.png" />
</div>
</body>
</html>
style.css, this is where the fading animation is at:
#cf {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
#cf img {
position: absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes cf3FadeInOut {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
Your code is fine you are selecting the wrong id.
Your code:
#cf3 img.top {
Should be
#cf img.top {
The keyframes can be above or below the selector both will work.
Example
I have the following code which is working fine on Chrome but not on Firefox. I want to know if something is going wrong in my code as the animation is totally different in this two browsers. As on Chrome the animation is smooth and the frames are fading nice. But on Firefox everything seem to be mess as there the animation seem to be cutted off.
#banner img {
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#top {
-moz-animation-name: bannerFadeInOut;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-moz-animation-direction: alternate;
animation-name: bannerFadeInOut;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
HTML
<div id="banner">
<img class="back" id="back" src="frames/frame_1.jpg"/>
<img class="top" id="top" src="frames/frame_2.jpg"/>
<img id="logo1" type="image/svg+xml" src="" />
<div class="border" id="border"></div>
<img id="cta" src="frames/title.png"/>
</div>
I've got this CSS:
#-webkit-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slider {
background-size: cover;
position: fixed;
top: 100px;
bottom: 0px;
height:calc(100%-135px);
width: 100%;
}
#slider img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0px;
width: 100%;
height: 100%;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#slider img {
-webkit-animation-name: sliderFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-moz-animation-name: sliderFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: sliderFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: sliderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#slider img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#slider img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#slider img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#slider img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
I'm learning CSS Animations, but I didn't find out how to set the display time of one image.
I tried to change the animation delay but that only causes trouble..
Do you have an idea how to do this ?
Best regards
There were several things that needed some attention. Here's how I accomplished it, though there are other ways.
For the animation itself:
#keyframes sliderFadeInOut {
0% {
opacity:0;
}
17% {
opacity:1;
}
25% {
opacity:1;
}
92% {
opacity:1;
}
100% {
opacity:0;
}
}
This causes the image to fade in, then fade out at whatever animation-duration we set.
Set the animation-iteration-count to 1, so the animation runs once.
animation-iteration-count: 1;
Each image in the stack needs to be timed to appear, then disappear as the next image in the stack becomes visible. To do this, use animation-delay and increase it for each image in the stack.
#slider img:nth-child(1) {
animation-delay: 0s;
}
#slider img:nth-child(2) {
animation-delay: 4s;
opacity:0;
}
#slider img:nth-child(3) {
animation-delay: 8s;
opacity:0;
}
#slider img:nth-child(4) {
animation-delay: 12s;
opacity:0;
}
The staggered animation-delay properties cause the first image in the stack to be shown initially. It's animation takes 5 seconds and results in the image disappearing. At 4 seconds, the 2nd image in the stack starts it's animation, appearing just as the first image is disappearing. And then so on for the 3rd and 4th images.
In the code above there's also an initial opacity property for the 2nd, 3rd and 4th images. This is necessary to hide them initially.
As it's setup now the images will loop only once. Some minor tweaking to animation-delay and animation-iteration-count would cause it to loop infinitely.
Here's the working demo.
please see below:
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1}
50% {height:300px; opacity: 0; }
}
I would like to start fading the object away only 50% thorugh the animation. not at the beginning. This currently doesn't do any opacity animation.
Not getting your question quiet well but I assume you want to delay the start of your animation, if it's that so.. than you can use animation-delay property... This will help you in delay your animation by few seconds
Demo (Modified demo of my answer here)
.blink_me {
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As commented by jCuber, if you want to start animation at 50% than try this
Demo
try this i made some changes in your fiddle it's work and also link of new fiddle
<div class="blink_me"> Blink</div>
.blink_me {
animation-name: blinker;
animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
background:#ff0000;
border:1px solid #00ff00;
}
#-webkit-keyframes blinker {
0% {width:20px; opacity: 0;}
50% {width:20px; opacity: 1; }
100% {width:50px; opacity: 0; }
}
http://jsfiddle.net/umz8t/293/
it looks like you just made a simple mistake the last line should read 100% not 50%. It could actually read anything between 51% to 100%. You also were missing a semi-colon, added it in.
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1; }
100% {height:300px; opacity: 0; }
}