How can I add a link to these images. I've tried many variations of slideshows but find when I add links it starts not displaying every other image. In my code below I have the links commented out. If I remove the links the images display fine.
I have repeated the images twice just trying to debug and have _parent tag in the link because this page will be displayed in an iframe.
Your help would be greatly appreciated. Thank you for your time reading this post.
HTML
<div class="slider">
<img class='photo' src="featuredProducts/On-Semi-Python-sensors-sm.png"/>
</div>
CSS
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
.photo {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider img:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider img:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider img:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider img:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
The problem is correctly with your links.
You have <img> inside anchor, but you try to hide img and leaves its parent anchor visible.
It is impossiple after that to make another image visible until the left parent anchor is hidden. Thus you see a blank white area until time passes to hide this left anchor and a new img can appear.
Solution is to hide the parent anchor of each img to have the right effect.
There are two steps:
HTML : Change class photo from img to anchor
CSS : Change selector to .slider a:nth-child(...)
This modified code works
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div class="slider">
<!--
<img class='photo' src="1.jpg" alt="" />
<img class='photo' src="2.jpg" alt="" />
<img class='photo' src="3.jpg" alt="" />
-->
<a class='photo' href="http://www.google.com" target="_parent" ><img src="1.jpg" alt="On Semi PYTHON sensors" /></a>
<a class='photo' href="http://www.youtube.com" target="_parent" ><img src="2.jpg" alt="" /></a>
<a class='photo' href="http://www.pinterest.com" target="_parent" ><img src="3.jpg" alt="" /></a>
<a class='photo' href="http://www.facebook.com" target="_parent" ><img src="4.jpg" alt="" /></a>
</div>
</body>
</html>
CSS
.slider { margin: 0; width: 180px; height: 1504px; overflow: hidden; position: relative; }
.photo { position: absolute; -webkit-animation: round 16s infinite; opacity: 0; width: 100%; }
#-webkit-keyframes round { 25% { opacity: 1; } 40% { opacity: 0; } }
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
Thats because of position: absolute for the images with photo class. You my remove the position: absolute from photo and add it to a elements instead.
.slider a{
position: absolute;
display: block;
}
.photo {
-webkit-animation: round 16s infinite;
opacity: 0;
width: 100%;
}
just replace .slide img with .slide a
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
a {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
}
img {
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" />
<img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" />
</div>
The code below helped. The images display nicely, but I need to link to separate pages for the images. Even when another image is displayed, the first link is active - in other words the links aren't mapping link2 with image2, link3 with image3...
Please take a look below and let me know if you see how to fix it. Thank you!
.slider {
margin: 0;
width: 180px;
height: 1504px;
overflow: hidden;
position: relative;
}
.slider a {
position: absolute;
-webkit-animation: round 16s infinite;
opacity: 0;
}
img {
width: 100%;
}
#-webkit-keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
.slider a:nth-child(4) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
animation-delay: 12s;
}
.slider a:nth-child(3) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-ms-animation-delay: 8s;
-o-animation-delay: 8s;
animation-delay: 8s;
}
.slider a:nth-child(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.slider a:nth-child(1) {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
<div class="slider">
<img class='photo' src="http://i.imgur.com/IMiabf0.jpg" alt="On Semi PYTHON sensors" />
<img class='photo' src="http://i.imgur.com/NqCM7jH.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/cjN8Qoa.jpg" alt="" />
<img class='photo' src="http://i.imgur.com/WQ2RS6O.png" alt="" />
</div>
Related
I found a cool, very simple text animation on a website that I would like to rebuild. Here is the link (the animation is in the footer of the page): http://www.motherbird.com.au/process/
I'm not familiar with CSS animations yet, but I've managed that so far:
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 5s infinite 0s;
-ms-animation: topToBottom 5s infinite 0s;
-webkit-animation: topToBottom 5s infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 1s;
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.animated span:nth-child(3){
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.animated span:nth-child(4){
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.animated span:nth-child(5){
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
25% { opacity: 0; }
50% { opacity: 0; }
75% { opacity: 0; }
100% { opacity: 1; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
How do I make the transition without fade?
Thanks for your help!
Another idea is to consider content of a pseudo element to change the text and you will have less of code:
.animated {
text-indent: 8px;
color:red;
}
.animated:before {
content: "cool.";
animation: topToBottom 5s infinite 0s;
}
#keyframes topToBottom {
0% {
content: "cool.";
}
25% {
content: "neat.";
}
50% {
content: "awesome.";
}
75% {
content: "groovy.";
}
100% {
content: "magic.";
}
}
<h2>CSS Animations are
<span class="animated">
</span>
</h2>
Since the animation-duration takes 5s, which represents 100% of the whole duration, and you have five spans or words, therefore each span will be visible for 1s or 20% of the time, then hidden until the end. Based on that you need to adjust the %'s inside the #keyframes to met the criteria and achieve the desired result:
.animated {
text-indent: 8px;
}
.animated span {
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
-ms-animation: topToBottom 5s infinite;
-webkit-animation: topToBottom 5s infinite;
animation: topToBottom 5s infinite;
}
.animated span:nth-child(2){
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated span:nth-child(3){
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated span:nth-child(4){
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated span:nth-child(5){
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#-webkit-keyframes topToBottom {
0%, 20% {opacity: 1} /* visible for 1s */
20.01%, 100% {opacity: 0} /* hidden for 4s */
}
<h2 class="animated">
CSS Animations are
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</h2>
Just .01% of a difference between the keyframes makes sure there is no fading effect.
Try visibility: hidden | visible:
.animated{
display: inline;
text-indent: 8px;
position: relative;
}
.animated span{
animation: topToBottom 5s infinite 0s;
-ms-animation: topToBottom 5s infinite 0s;
-webkit-animation: topToBottom 5s infinite 0s;
color: red;
/* display: none; */
overflow: hidden;
position: absolute;
display: inline-block;
visibility: hidden;
}
.animated span:nth-child(2){
animation-delay: 1s;
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.animated span:nth-child(3){
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.animated span:nth-child(4){
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.animated span:nth-child(5){
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
#-webkit-keyframes topToBottom{
0% { visibility: hidden; }
20% { visibility: hidden; }
40% { visibility: hidden; }
60% { visibility: hidden; }
80% { visibility: hidden; }
100% { visibility: visible; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
for 10 words:
.animated{
display: inline;
text-indent: 8px;
position: relative;
}
.animated span{
animation: topToBottom 10s infinite 0s;
-ms-animation: topToBottom 10s infinite 0s;
-webkit-animation: topToBottom 10s infinite 0s;
color: red;
/* display: none; */
overflow: hidden;
position: absolute;
display: inline-block;
visibility: hidden;
}
.animated span:nth-child(2){
animation-delay: 1s;
-ms-animation-delay: 1s;
-webkit-animation-delay: 1s;
}
.animated span:nth-child(3){
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
.animated span:nth-child(4){
animation-delay: 3s;
-ms-animation-delay: 3s;
-webkit-animation-delay: 3s;
}
.animated span:nth-child(5){
animation-delay: 4s;
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
}
.animated span:nth-child(6){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(7){
animation-delay: 6s;
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
}
.animated span:nth-child(8){
animation-delay: 7s;
-ms-animation-delay: 7s;
-webkit-animation-delay: 7s;
}
.animated span:nth-child(9){
animation-delay: 8s;
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
}
.animated span:nth-child(10){
animation-delay: 9s;
-ms-animation-delay: 9s;
-webkit-animation-delay: 9s;
}
#-webkit-keyframes topToBottom{
0% { visibility: hidden; }
10% { visibility: hidden; }
20% { visibility: hidden; }
30% { visibility: hidden; }
40% { visibility: hidden; }
50% { visibility: hidden; }
60% { visibility: hidden; }
70% { visibility: hidden; }
80% { visibility: hidden; }
90% { visibility: hidden; }
100% { visibility: visible; }
}
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
<span>more.</span>
<span>lorem.</span>
<span>pixel.</span>
<span>word.</span>
<span>ten.</span>
</div>
</h2>
I have a slideshow with CSS3 which have animation-delay in each child,
but this is not dynamic because for each tag I should add nth-child ,
Is there any way to add animation-delay automatically to li tags?
this is CSS code:
.cb-slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
I want to change this code to add 6s delay to each tags.
There is no way to handle it dynamically except adding inline style dynamically or with javascript
for example
.cb-slideshow li {
animation: FadeIn 1s linear;
animation-fill-mode: both;
}
#keyframes FadeIn {
0% {
opacity: 0;
transform: scale(.1);
}
85% {
opacity: 1;
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
<div class="cb-slideshow">
<li style="animation-delay: 1s;">test text</li>
<li style="animation-delay: 2s;">test text</li>
<li style="animation-delay: 3s;">test text</li>
<li style="animation-delay: 4s;">test text</li>
<li style="animation-delay: 5s;">test text</li>
</div>
You could use PHP to dynamically echo each part of the style, or intergrate it right into the css.
For example
.button:hover {
border: 10px solid;
transition: <?php echo $lot ?>;
}
Where $lot is the animation time.
I dont know how to get the nth-child(N) in php, but there is undoubtably a way.
Sorry if this wasn't very useful, just wanted to say that php would be a good way to do it.
I had tried a simple animation. See this fiddle.
HTML:
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>
CSS:
.special_sec span {
font-size:30px;
list-style:none;
text-align:center;
padding:10px 0;
display:block;
animation:subheadinganimation 17s;
color: transparent;
}
In my CSS (.special_sec span), I have added color: transparent.
My problem is:
If color is transparent, after the animation all the text are getting hidden. See my fiddle.
If I remove this color property, all the text are initially visible. Then the animation also runs. See this fiddle.
I want the text to be visible only after the delay timings that I have given. I can't understand the problem. What is the issue? How can I fix this?
You need to set the animation-fill-mode as forwards so that the element would hold the state as at the final keyframe of the animation (which is color: #000). Without this setting, the element reverts back to its original state (color: transparent) after the animation is complete.
animation: subheadinganimation 17s forwards;
#keyframes subheadinganimation {
0%, 30% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
33%,
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
color: #000;
}
}
.special_sec span {
font-size: 30px;
list-style: none;
text-align: center;
padding: 10px 0;
display: block;
animation: subheadinganimation 17s forwards;
color: transparent;
}
span.sub_heading {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
span.sub_heading1 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
span.sub_heading2 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
span.sub_heading3 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
span.sub_heading4 {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="special_sec">
<span class="sub_heading">About Us</span>
<span class="sub_heading1">Services</span>
<span class="sub_heading2">Portfolio</span>
<span class="sub_heading3">Clients</span>
<span class="sub_heading4">Contact Us</span>
</div>
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