The slides work for images 1-6 (original code), but I need 13 images to display. Here is what I did and thought it would work, but it doesn't. It still only plays the first 6 images. Originally the 70s were 36s. I don't know what I am doing wrong/missing??
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 70s linear infinite 0s;
-moz-animation: imageAnimation 70s linear infinite 0s;
-o-animation: imageAnimation 70s linear infinite 0s;
-ms-animation: imageAnimation 70s linear infinite 0s;
animation: imageAnimation 70s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 70s linear infinite 0s;
-moz-animation: titleAnimation 70s linear infinite 0s;
-o-animation: titleAnimation 70s linear infinite 0s;
-ms-animation: titleAnimation 70s linear infinite 0s;
animation: titleAnimation 70s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/slides/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/slides/2.jpg);
-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 {
background-image: url(../images/slides/3.jpg);
-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 {
background-image: url(../images/slides/4.jpg);
-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 {
background-image: url(../images/slides/5.jpg);
-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 {
background-image: url(../images/slides/6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(../images/slides/7.jpg);
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(../images/slides/8.jpg);
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(../images/slides/9.jpg);
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) span {
background-image: url(../images/slides/10.jpg);
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) span {
background-image: url(../images/slides/11.jpg);
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) span {
background-image: url(../images/slides/12.jpg);
-webkit-animation-delay: 64s;
-moz-animation-delay: 64s;
-o-animation-delay: 64s;
-ms-animation-delay: 64s;
animation-delay: 64s;
}
.cb-slideshow li:nth-child(13) span {
background-image: url(../images/slides/13.jpg);
-webkit-animation-delay: 70s;
-moz-animation-delay: 70s;
-o-animation-delay: 70s;
-ms-animation-delay: 70s;
animation-delay: 70s;
}
.cb-slideshow li:nth-child(2) div {
-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) div {
-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) div {
-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) div {
-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) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-o-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 42s;
-moz-animation-delay: 42s;
-o-animation-delay: 42s;
-ms-animation-delay: 42s;
animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) div {
-webkit-animation-delay: 48s;
-moz-animation-delay: 48s;
-o-animation-delay: 48s;
-ms-animation-delay: 48s;
animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) div {
-webkit-animation-delay: 54s;
-moz-animation-delay: 54s;
-o-animation-delay: 54s;
-ms-animation-delay: 54s;
animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) div {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) div {
-webkit-animation-delay: 64s;
-moz-animation-delay: 64s;
-o-animation-delay: 64s;
-ms-animation-delay: 64s;
animation-delay: 64s;
}
.cb-slideshow li:nth-child(13) div {
-webkit-animation-delay: 70s;
-moz-animation-delay: 70s;
-o-animation-delay: 70s;
-ms-animation-delay: 70s;
animation-delay: 70s;
}
/* Animation for the slideshow images */
#-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 }
}
/* Animation for the title */
#-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
Without seeing your HTML to verify, I would bet that you are missing the extra li, span and div elements needed to go beyond the original six.
You should have a total of 13 li elements with span and div elements defined for each.
You may also want to clear your cache...just in case. ;)
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 put this css image transition type thing together in notepad++ after glancing at some examples online, and it worked just fine in any browser. Now I copy and pasted the code into a much large website project in visual studio and the transition effect just refuses to work in Chrome, and Firefox, but will work in IE... I tried to delete every parent div tag I could find in the project and the animation effect still did not work.. It just loads all three images like ordinary html with no css. Any ideas would be awesome...
#-webkit-keyframes showLogo {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes showLogo {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes showLogo {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes showLogo {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#logoTransition img {
position:absolute;
left:0;
}
#logoTransition {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#logoTransition img {
-webkit-animation-name: showLogo;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 30s;
-moz-animation-name: showLogo;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 30s;
-o-animation-name: showLogo;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 30s;
animation-name: showLogo;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 30s;
}
#logoTransition img:nth-of-type(1) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}
#logoTransition img:nth-of-type(2) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}
#logoTransition img:nth-of-type(3) {
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-o-animation-delay: 10s;
animation-delay: 10s;
}
Html
<div id="login-left-container logoTransition ">
<img src="img/1small.png" />
<img src="img/2small.png" />
<img src="img/3small.png" />
</div>
One problem is that you have two id's on your div, if you need multiple selectors you should consider using a class/classes instead. Try this:
<div id="login-left-container" class="logoTransition">
<img...>
<img...>
<img...>
</div>
and refining your selector to .logoTransition img:nth-of-type(1) {...} etc.
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
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.