i have this simple web page and what i want to do is to fade in the first pic for 5 seconds then change it to picture # 2 for 5 seconds as well. here is my code:
<!DOCTYPE html>
<html>
<style>
#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;
}
}
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 30s;
animation-duration: 10s;
animation-direction: alternate;
}
}
</style>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="fade.css">
<title>Wideout</title>
</head>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/seMwpP0yeu4"
frameborder="0" allowfullscreen></iframe>
<div id="cf">
<img class="bottom" src="images/1.jpg" height="100" />
<img class="top" src="images/2.jpg" height="100" />
</div>
</body>
</html>
i do believe my problem is with the percentage part. can someon help me out? much appreciated
This can be done just using CSS3
#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;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#-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 }
}
Check
Here's a JSFiddle
Related
My background images are all too stretched width wise and I have tried countless things to try and make it work. I have changed width parameters, height parameter, looked on different sights for answers, and could not find anything that worked. The pictures are background images and are in an animation to fade through the images. I am using Google Chrome as the browser and pictures that I have on my desktop. I found some pictures online to add in the snippet.
#crossfade > img {
width:100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
-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;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
-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 }
}
<html>
<div id= 'crossfade'>
<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>
</html>
This is due to image aspect ratio. Instead of adding img element add a div element with a background-image. you can then play with the height, position accordingly. It will keep your aspect ration intact. Please see the below solution or run it in codepen https://codepen.io/salinaacharya/pen/PVowPz
<html>
<div id= 'crossfade'>
<div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/1.jpg)">
</div>
<div class="image-box" style="background-image: url(https://www.gstatic.com/webp/gallery/2.jpg)">
</div>
<div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/3.jpg)">
</div>
<div class="image-box" style="background-image:url(https://www.gstatic.com/webp/gallery/4.jpg)">
</div>
</div>
</html>
#crossfade > .image-box {
width:100%;
height:500px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
-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;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
#crossfade > .image-box:nth-child(2) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > .image-box:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > .image-box:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > .image-box:nth-child(5) {
-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 }
}
You need to remove the property width or height from your #crossfade element in order the have a correct scaling, you can set min-width and min-height in order to achieve the full screen mode that you're looking for, although you might lose some of the image visibility.
#crossfade > img {
min-width: 100%;
min-height: 100%;
}
Try adding object-fit: cover to the image
#crossfade>img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: -1;
animation: imageAnimation 30s linear infinite 0s;
}
#crossfade>img:nth-child(2) {
animation-delay: 6s;
}
#crossfade>img:nth-child(3) {
animation-delay: 12s;
}
#crossfade>img:nth-child(4) {
animation-delay: 18s;
}
#crossfade>img:nth-child(5) {
animation-delay: 24s;
}
#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
}
}
<div id='crossfade'>
<img src="https://www.gstatic.com/webp/gallery/1.jpg">
<img src="https://www.gstatic.com/webp/gallery/2.jpg">
<img src="https://www.gstatic.com/webp/gallery/3.jpg">
<img src="https://www.gstatic.com/webp/gallery/4.jpg">
</div>
I'm having a bit of trouble getting a crossfade animation to stop on the last nth-child. I'm aware of animation-fill-mode: forwards , but it doesn't seem to work (I've tried putting it in different places to such as in the initial .crossfade declaration.)
Here's my html:
<body>
<div class= "ad">
<div class="crossfade">
<img src="image1.jpg" alt="Image 1">
<img src="image2.png" alt="Image 2">
<img src="image3.png" alt="Image 3">
<img src="image4.png" alt="Image 4">
</div>
</div>
</body>
And my CSS is here:
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
animation-iteration-count:1;
-webkit-backface-visibility: hidden;
-webkit-animation-name: imageAnimation;
-webkit-animation: imageAnimation 43s linear 1 0s;
-moz-animation: imageAnimation 43s linear 1 0s;
-o-animation: imageAnimation 43 linear 1 0s;
-ms-animation: imageAnimation 43 linear 1 0s;
}
.crossfade > img:nth-child(1) {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-ms-animation-delay: 1s;
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
-o-animation-delay: 7s;
-ms-animation-delay: 7s;
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-o-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-o-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
animation-fill-mode: forwards;
}
#-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 }
}
I'm not quite sure what I'm doing wrong or what I'm missing. Thanks in advance!
Since your #keyframes rule ends with opacity: 0 it doesn't matter if you use forwards or not, its end state will be opacity: 0 for both.
One solution would be to add a 2nd #keyframes rule for the last item, together with forwards.
Note, I removed all the prefixed properties to make is easier to parse the code. Also, the original code lacked a lot of the non prefixed, both properties and keyframe rules, and you should also always put the prefixed properties before the non prefixed
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
backface-visibility: hidden;
animation: imageAnimation 43s linear 0s 1 forwards;
}
.crossfade > img:nth-child(1) {
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
animation-delay: 21s;
animation-name: imageAnimationLast;
}
#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}
}
#keyframes imageAnimationLast {
0%{ opacity:0;
animation-timing-function: ease-in; }
8% { opacity: 1;
100% { opacity: 1}
}
<div class= "ad">
<div class="crossfade">
<img src="http://placehold.it/200/f00" alt="Image 1">
<img src="http://placehold.it/200/ff0" alt="Image 2">
<img src="http://placehold.it/200/0ff" alt="Image 3">
<img src="http://placehold.it/200/00f" alt="Image 4">
</div>
</div>
Based on what you intend to do with those items and how they overlap, and as the 2nd is on top of the 3rd and so on, you could simply let the #keyframes rule stay at opacity: 1
.crossfade > img {
width: 300px;
height: 250px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
backface-visibility: hidden;
animation: imageAnimation 43s ease-in 0s 1 forwards;
}
.crossfade > img:nth-child(1) {
animation-delay: 1s;
}
.crossfade > img:nth-child(2) {
animation-delay: 7s;
}
.crossfade > img:nth-child(3) {
animation-delay: 14s;
}
.crossfade > img:nth-child(4) {
animation-delay: 21s;
}
#keyframes imageAnimation {
0%{ opacity:0; }
8% { opacity: 1; }
100% { opacity: 1; }
}
<div class= "ad">
<div class="crossfade">
<img src="http://placehold.it/200/f00" alt="Image 1">
<img src="http://placehold.it/200/ff0" alt="Image 2">
<img src="http://placehold.it/200/0ff" alt="Image 3">
<img src="http://placehold.it/200/00f" alt="Image 4">
</div>
</div>
Refer this as an example, you could even try it like this, calling a declared animation again and again on each child after certain delay.
Now animation-fill-mode:forwards takes into account the last property of animation that ends at 100% i.e. on animation end what was the value of your opacity will be applied. In below example I have used animation-fill-mode:forwards for each image to perform that color-transition of images.
div img {
width: 250px;
height: 250px;
position: absolute;
}
div img:nth-child(1) {
opacity: 0;
animation: mv 10s linear forwards;
}
div img:nth-child(2) {
opacity: 0;
animation: mv 10s linear 10s forwards;
}
div img:nth-child(3) {
opacity: 0;
animation: mv 10s linear 20s forwards;
}
div img:nth-child(4) {
opacity: 0;
animation: mv 10s linear 30s forwards;
}
#keyframes mv {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div>
<img src="http://placehold.it/301/f22" alt="Image 1">
<img src="http://placehold.it/302/f2f" alt="Image 2">
<img src="http://placehold.it/303/ff2" alt="Image 3">
<img src="http://placehold.it/304/2f2" alt="Image 4">
</div>
I have a method to crossfade images, but it's way too slow. I like the time it takes to transition...but the transition itself is way too slow and needs sped up. I've tried a number of things to no avail and some help and a little explanation would be greatly appreciated. Also note I like this method due to the browser support. Thanks in advance!
#crossfade > img {
position: absolute;
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
max-width: none;
max-height: none;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 75s linear infinite 0s;
-moz-animation: imageAnimation 75s linear infinite 0s;
-o-animation: imageAnimation 75s linear infinite 0s;
-ms-animation: imageAnimation 75s linear infinite 0s;
animation: imageAnimation 75s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-o-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;s
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 45s;
-moz-animation-delay: 45s;
-o-animation-delay: 45s;
-ms-animation-delay: 45s;
animation-delay: 45s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: linear; }
5% { opacity: 1;
-webkit-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: linear; }
5% { opacity: 1;
-moz-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: linear; }
5% { opacity: 1;
-o-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: linear; }
5% { opacity: 1;
-ms-animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: linear; }
5% { opacity: 1;
animation-timing-function: linear; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
Fiddle Included
https://jsfiddle.net/joelssk/eoq5q8ne/
I currently have the following HTML:
<div class="crossfade_container">
<div id="crossfade">
****<img src="osu_crossfade1.png" alt="Ohio State Cheerleaders waving OHIO flags" />****
****<a href="#"><img src="um_huddle1.png" alt="Michigan Players in team Huddle" />****
****<img src="osu_crossfade2.png" alt="Overlooking Independence Hall from Ohio Stadium" />****
****<img src="um_qb1.png" alt="Devin Gardner Scrambles out of the pocket" />****
****<img src="osu_crossfade3.png" alt="Ohio Stadium on Gameday" />****
</div>
</div>
And the CSS:
.crossfade_container {
display: inline-block;
float: right;
position: relative;
background-color: #f0f0f0;
width: 695px;
height: 350px;
margin-top: 10px;
box-shadow: 2px 2px 2px silver;
}
#crossfade > **a** img {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% { 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 }
}
I would like to add to surround the crossfaded images so they are able to be links and not just images. However, whenever do so, it destroys the css I have in place. thanks for the help!
Need to remove or update all > CSS declarations: > indicates a direct child and no longer works because img is now a child of a, not a direct descendent of #crossfade. See updated code block below which adds a before img which translates to "direct descendent of #crossfade a, descendent img of a".
.crossfade_container {
display: inline-block;
float: right;
position: relative;
background-color: #f0f0f0;
width: 695px;
height: 350px;
margin-top: 10px;
box-shadow: 2px 2px 2px silver;
}
#crossfade > a img {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > a img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > a img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > a img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > a img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% { 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 }
}
What happens if you update all img instances to your a container element?
.crossfade_container {
display: inline-block;
float: right;
position: relative;
background-color: #f0f0f0;
width: 695px;
height: 350px;
margin-top: 10px;
box-shadow: 2px 2px 2px silver;
}
#crossfade > a {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > a:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > a:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > a:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > a:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% { 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 }
}
If you aren't opposed to a little jQuery, you could also eliminate all anchor tags and do:
<img src="" data-href="http://url.com/" ... />
jQuery:
$(".crossfade_container img").on( "click", function(){
window.open( $(this).data("href");
});
CSS add the pointer cursor:
.crossfade_container img {
cursor: pointer;
}
Here it is
.crossfade_container {
display: inline-block;
float: right;
position: relative;
background-color: #f0f0f0;
width: 695px;
height: 350px;
margin-top: 10px;
box-shadow: 2px 2px 2px silver;
}
#crossfade img {
width: 695px;
height: 350px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% {
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
}
}
<div class="crossfade_container">
<div id="crossfade">
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
<a href="#">
<img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
</a>
</div>
</div>
HTML/CSS noob here. I currently have 5 images that overlay one another and fade in-and-out in 8 second intervals. In order to do this, I have set the images to have an absolute positioning. I am now in the process of creating this site dynamically so I would like to put these crossfading images within a div ("crossfade_container") so I can then center them as the browser size changes. Obviously, with the absolute positioning on the images itself will not allow for this dynamic positioning.
The following is my HTML:
<div class="crossfade_container">
<div id="crossfade">
<img src="Images/Michigan_1.png" />
<img src="Images/Miller_1.png" />
<img src="Images/OSU_Helmets.png" />
<img src="Images/Go_Blue.png" />
<img src="Images/OSU_UM.png" />
</div>
</div>
The following is my CSS to create crossfade between images:
#crossfade > img {
width: 695px;
height: 350px;
position: absolute;
top: 240px;
left: 441px;
color: transparent;
opacity: 0;
z-index: 0;
box-shadow: 2px 2px 2px silver;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% { 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 }
}
To this point, everything is how I would like it. It's the dynamic aspect of the code that is confusing me. Here is the following code I am using to no avail:
#media screen and (min-width : 481px) and (max-width: 695px) {
.crossfade_container {
display: block;
float: none;
background-color: red;
width: 480px;
height: 255px;
margin-left: auto;
margin-right: auto;
}
#crossfade > img {
width: 480px;
height: 235px;
position: relative;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
}
With this, ".crossfade_container" is exactly where I want it and by changing the position to "relative" within "#crossfade > img" only the first image in the series appears where I would like it. Now instead of the images being stacked on top of one another, they now appear in series going down the page - as if they are block elements (hope that makes sense).
Please help & let me know if I need to clarify anything. Thanks.
You could do it by using css position: relative; to .crossfade_container and position: absolute; to #crossfade > img
JSFiddle - DEMO
HTML:
<div class="crossfade_container">
<div id="crossfade">
<img src="Images/Michigan_1.png" style="background: red;">
<img src="Images/Miller_1.png" style="background: blue;">
<img src="Images/OSU_Helmets.png" style="background: pink;">
<img src="Images/Go_Blue.png" style="background: orange;">
<img src="Images/OSU_UM.png" style="background: black;">
</div>
</div>
CSS:
#crossfade > img {
width: 695px;
height: 350px;
position: absolute;
top: 50px;
left: 50px;
color: transparent;
opacity: 0;
z-index: 0;
box-shadow: 2px 2px 2px silver;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
-o-animation: imageAnimation 40s linear infinite 0s;
-ms-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
#crossfade > img:nth-child(2) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
#crossfade > img:nth-child(3) {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
#crossfade > img:nth-child(4) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#crossfade > img:nth-child(5) {
-webkit-animation-delay: 32s;
-moz-animation-delay: 32s;
-o-animation-delay: 32s;
-ms-animation-delay: 32s;
animation-delay: 32s;
}
#-webkit-keyframes imageAnimation {
5% {
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
}
}
#media screen and (min-width : 481px) and (max-width: 695px) {
.crossfade_container {
position: relative;
display: block;
float: none;
background-color: red;
width: 480px;
height: 255px;
margin-left: auto;
margin-right: auto;
}
#crossfade > img {
width: 480px;
height: 235px;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
}
For More Info:
Mozilla MDN CSS Position