Is it possible to cross fade 5 images in CSS, without using java script? I have found a similar question:
css3 image crossfade (no javascript) , however, it has only the CSS code snippet; which I tried, but could not get it working. I'm new to CSS, so could not link the CSS mentioned in the above page to my following HTML:
<div id= "crossfade">
<img class = "cone" src = "1.png" alt = "png">
<img class = "ctwo" src = "2.png" alt = "png">
<img class = "cthree" src = "3.png" alt = "png">
<img class = "cfour" src = "4.png" alt = "png">
<img class = "cfive" src = "5.png" alt = "png">
</div>
This can easily be done with CSS3 if you know how many images you have.
jsFiddle: http://jsfiddle.net/hajmd/
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
The "30s" at "-webkit-animation: imageAnimation 30s linear infinite 0s;" tells that the animation for each image will last 30 seconds in infinete number of times.
#crossfade > img:nth-child(2) {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
The example you referenced should work for you for the example you referenced. However please note that CSS3 is not supported on all browsers (Such as IE8 and IE7) and therefore will not work in those browsers.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have got an crossfading animation to show 3 steps of content. How could I make it so that it ends after the third one? so no more crossfading.
CodePen link
I divided it into nth-child(),
Here's my CSS code:
.animation {
-moz-animation: imageAnimation 30s linear 0s;
-ms-animation: imageAnimation 30s linear 0s;
-o-animation: imageAnimation 30s linear 0s;
-webkit-animation: imageAnimation 30s linear 0s;
-webkit-backface-visibility: hidden;
animation: imageAnimation 30s linear 0s;
color: black;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.animation:nth-child(2) {
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
-o-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animation:nth-child(3) {
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
HTML
<div class="box">
<div class="animation">
<h4>Hello-1</h4>
</div>
<div class="animation">
<h4>Hello-2</h4>
</div>
<div class="animation">
<h4>Hello-3</h4>
</div>
</div>
If you by "to end" mean that the 3rd child does not dissapear, you need to declare new animation #keyframes declaration that you use for that 3rd child, so it does not end (100%) with opacity:0.
EDIT:
This is how the new keyframes definition could look like:
#keyframes imageAnimationStop {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
100% {
opacity: 1
}
}
This says that the end state (100%) should have opacity: 1 so it remains visible. I also forked your codepen. This new keyframe is not browser prefixed but I guess you can do that much :). Then you just need to use this new heyframes definition for your 3rd child demo
I'm working on a project where multiple div's are loaded with a small animation, but as you can see in the fiddle down, they're carrying all at once. Any idea how do they carry one after another with a delay of 0.1 s?
http://jsfiddle.net/HaQmN/38/
Thanks
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
#-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
#-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.example {
display: inline-block;
width:48%;
height:100px;
background:orange;
margin: 1% 1%;
}
<div class="animated fadeInUp example">Hello World</div>
You can delay animation with animation-delay property like bellow.
.animated:nth-child(1){
-webkit-animation-delay: 0.1s;
}
.animated:nth-child(2){
-webkit-animation-delay: 0.2s;
background-color: red;
}
.animated:nth-child(3){
-webkit-animation-delay: 0.3s;
animation-delay: 1.5s;
}
.animated:nth-child(4){
-webkit-animation-delay: 0.4s;
animation-delay: 1.5s;
}
.animated:nth-child(5){
-webkit-animation-delay: 0.5s;
animation-delay: 1.5s;
}
.animated:nth-child(6){
-webkit-animation-delay: 0.6s;
animation-delay: 1.5s;
}
But that is a lot of CSS and doest not suite if you have dynamic number of Divs. so you javascript to add delay property to you divs one by one.
Here it is on JS fiddle
http://jsfiddle.net/VR7AN/
I have made a simple animation with the basic principles of this guide: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
The animation runs perfectly the first time, but when it loops it turns grey and only cycles through some of the images. I can't figure out why the loop would work but not the same as the first time.
Here's my css:
#fadethru > img {
position: absolute;
color: transparent;
top: 0px;
left: 0px;
opacity: 0;
z-index: 0;
display: block;
-webkit-animation: imageAnimation 4.5s linear infinite 0s;
-moz-animation: imageAnimation 4.5s linear infinite 0s;
-o-animation: imageAnimation 4.5s linear infinite 0s;
-ms-animation: imageAnimation 4.5s linear infinite 0s;
animation: imageAnimation 4.5s linear infinite 0s;
animation-iteration-count: infinite;
}
#fadethru > img:nth-child(1) {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
-ms-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#fadethru > img:nth-child(2) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
#fadethru > img:nth-child(3) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#fadethru > img:nth-child(4) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
#fadethru > img:nth-child(5) {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#fadethru > img:nth-child(6) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#fadethru > img:nth-child(7) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
-o-animation-delay: 3.5s;
-ms-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#fadethru > img:nth-child(8) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#fadethru > img:nth-child(9) {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
-o-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
15% { opacity: 1; animation-timing-function: ease-out; }
50% { opacity: 1; }
75% { opacity: 0; }
100% { opacity: 0 }
}
and the HTML:
<div id="fadethru">
<img src="img/redjewel.png" id="red" alt="red jewel">
<img src="img/orangejewel.png" id="orange" alt="orange jewel">
<img src="img/yellowjewel.png" id="yellow" alt="yellow jewel">
<img src="img/grassjewel.png" id="grass" alt="green jewel">
<img src="img/greenjewel.png" id="green" alt="turquois jewel">
<img src="img/bluejewel.png" id="blue" alt="blue jewel">
<img src="img/indigojewel.png" id="indigo" alt="indigo jewel">
<img src="img/purplejewel.png" id="purple" alt="purple jewel">
<img src="img/pinkjewel.png" id="pink" alt="pink jewel">
</div>
You need to display each item only for the portion of the time of the total loop it takes up. So 9 displays / 100 percent = 11.11 percent of total loop time per element.
You have the elements displaying from 15-50% of the loop, so when it starts to repeat, some elements are covering others, but that doesn't work properly, so through that error you are seeing grey.
I did mine as 0-14%, lazily, and also only for chrome (which I use) so I didn't have to type all that code! But it should fix your issue:
#fadethru > img {
opacity:0;
position:absolute;
top:0; left:0;
-webkit-animation: imageAnimation 4.5s linear infinite 0s;
}
and
#-webkit-keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
9% { opacity: 1 }
14% { opacity: 0 }
100% { opacity: 0 }
}
I am trying to make each image display at equal lengths of time, however the last image (12) seems to get stuck, then it shifts to image 3 instead instead of image 1 to start the animation again?
I have set the animation to last 4 seconds which is 48/12 images. Really can't figure out why image 12 transitions to image 3 instead of 1??
HTML
<div id="container">
<div id="crossfade">
<img src="images/img1.jpg">
<img src="images/img2.jpg">
<img src="images/img3.jpg">
<img src="images/img4.jpg">
<img src="images/img5.jpg">
<img src="images/img6.jpg">
<img src="images/img7.jpg">
<img src="images/img8.jpg">
<img src="images/img9.jpg">
<img src="images/img10.jpg">
<img src="images/img11.jpg">
<img src="images/img12.jpg">
</div>
</div>
CSS
#fadecontainer {
position: relative;
margin-bottom: 390px;
}
#crossfade > img {
position: absolute;
top: 10px;
left: 0px;
color: transparent;
border: 1px solid #000000;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 48s linear infinite 0s;
-moz-animation: imageAnimation 48s linear infinite 0s;
-o-animation: imageAnimation 48s linear infinite 0s;
-ms-animation: imageAnimation 48s linear infinite 0s;
animation: imageAnimation 48s linear infinite 0s;
}
#crossfade > img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(6) {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
#crossfade > img:nth-child(7) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(8) {
-webkit-animation-delay: 28s;
-moz-animation-delay: 28s;
-o-animation-delay: 28s;
-ms-animation-delay: 28s;
animation-delay: 28s;
}
#crossfade > img:nth-child(9) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#crossfade > img:nth-child(10) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
#crossfade > img:nth-child(11) {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
#crossfade > img:nth-child(12) {
-webkit-animation-delay: 44s;
-moz-animation-delay: 44s;
-o-animation-delay: 44s;
-ms-animation-delay: 44s;
animation-delay: 44s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
4% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
4% { opacity: 1;
-moz-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
4% { opacity: 1;
-o-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
4% { opacity: 1;
-ms-animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
4% { opacity: 1;
animation-timing-function: ease-out; }
25% { opacity: 1 }
30% { opacity: 0 }
100% { opacity: 0 }
}
Ignoring the inconsistencies in animation-duration among browsers, the math of your animation is off. The issue is because of how long you have opacity:1 in the animation. This is because 25% - 4% = 21% and 21% * 12 > 100%. The difference should instead be more like 100% / 12 = 8.333333%,
#keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
2% { opacity: 1; animation-timing-function: ease-out; }
8.333% { opacity: 1 }
10% { opacity: 0 }
100% { opacity: 0 }
}
You have to prefix the animations to get cross-browser performance of course
So I'm trying to animate some text dropping down once its finished animating.
The problem is it just disappears after it's finished, even though I set the opacity to 1# 100%.
/* text animation */
#-webkit-keyframes textAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-200%);
}
10% {
opacity: 1;
-webkit-transform: translateY(0%);
}
20% {
opacity: 1;
-webkit-transform: translateY(0%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
.text-animation {
z-index: 1000;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: textAnimation 2s linear 2s;
-moz-animation: textAnimation 2s linear 2s;
-o-animation: textAnimation 2s linear 2s;
-ms-animation: textAnimation 2s linear 2s;
animation: textAnimation 2s linear 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
/* text animation */
I just don't understand what the problem is here...
This worked for me.
If you set the end state in the class and not add a delay.
#-webkit-keyframes textAnimation {
0% { opacity: 0; -webkit-transform: translateY(-200%); }
33% { opacity: 1; -webkit-transform: translateY(-200%); }
100% { opacity: 1; -webkit-transform: translateY(0%); }
}
.text-animation {
color:#fff;
font-size:32px;
width: 100%;
text-align: center;
opacity: 1;
-webkit-animation: textAnimation 3s linear;
-moz-animation: textAnimation 3s linear;
-o-animation: textAnimation 3s linear;
-ms-animation: textAnimation 3s linear;
animation: textAnimation 3s linear;
}
In you .text-animation declaration add this :
-webkit-animation-fill-mode: forwards;
Thanks to it, your animation will stay to the last keyframe state. (here, opacity 0).
You can see the result here : http://codepen.io/joe/pen/CkbcL
Source : https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode