Animation of falling object not working on IE - javascript

I have a animtaion for falling objects inside a div. I tested it in all browsers and its works properly but on IE it doesn't animate at all. I ask for your help, thank you!
It works for both Desktop Size and in Mobile devices, it works on Google Chrome, Mozilla, Edge, Safarri, Opera except on IE
here is my SCSS code:
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
#media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
}
#-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
#-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
}
}
and here is the script:
function getSeason() {
var currentMonth = new Date().getMonth() + 1;
if (currentMonth === 12 || currentMonth === 1 || currentMonth === 2) {
$(".falling__Object span").addClass("snow");
} else if (currentMonth >= 3 && currentMonth <= 5) {
$(".falling__Object span").addClass("spring");
} else if (currentMonth >= 6 && currentMonth <= 8) {
$(".falling__Object span").addClass("green-leaf");
} else if (currentMonth >= 9 && currentMonth <= 11) {
$(".falling__Object span").addClass("leaves");
}
return ""
}

Use the css properties compatible with ie11 (the un-prefixed) for animation, transform & keyframes
.falling__Object span {
display: inline-block;
z-index: 10000;
-webkit-animation: falling__Object 10s infinite linear;
-moz-animation: falling__Object 10s infinite linear;
animation: falling__Object 10s infinite linear;
&.leaves {
width: 5vw;
background: url(../img/section-countdown/leaf.png);
background-repeat: no-repeat;
background-size: 75%;
/* margin: -280px 84px 54px -34px;
#media screen and (min-width: 320px) and (max-width:500px) {
width: 5vwvw;
}*/
}
&.snow {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/snow.gif");
background-size: 70%;
background-repeat: no-repeat;
}
&.green-leaf {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/green-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
&.spring {
width: 5vw;
margin: -280px 84px 54px -34px;
background: url("../img/section-countdown/spring-leaf.png");
background-size: 70%;
background-repeat: no-repeat;
}
}
.falling__Object span:nth-child(1n+5) {
-webkit-animation-delay: 1.3s;
-moz-animation-delay: 1.3s;
animation-delay: 1.3s;
}
.falling__Object span:nth-child(3n+2) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.falling__Object span:nth-child(2n+5) {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.falling__Object span:nth-child(3n+10) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
animation-delay: 2.7s;
}
.falling__Object span:nth-child(7n+2) {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.falling__Object span:nth-child(4n+5) {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.falling__Object span:nth-child(3n+7) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
animation-delay: 8s;
}
#-webkit-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
#-moz-keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}
#keyframes falling__Object {
0% {
opacity: 1;
-webkit-transform: translate(0, 0px) rotateZ(0deg);
transform: translate(0, 0px) rotateZ(0deg);
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
}
}

Related

Image Preloader with CSS Colour not displaying

I'm trying to add preloader to wordpress website using divi attached. However, I'm having problems getting the preloader to even display.
This is the '.gif' I'm using, and ideally I'd like it to be a white background with gold type colour '#A7784A' as the loader. Thus, I'm trying to apply that with CSS.
I think the error is coming from CSS but not 100% sure. Any advice would be much appreciated. Thanks
HTML Code at Body
jQuery(window).load(function() {
if (jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) {
jQuery('.loader').delay(1000).fadeOut("slow");
jQuery('.overlay-loader').delay(1000).fadeOut("slow");
} else {
jQuery(".overlay-loader").css('display', 'none');
}
})
.overlay-loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ffffff;
opacity: 1;
z-index: 999999;
height: 100%;
width: 100%;
overflow: hidden !important;
margin: auto;
}
.loader {
position: absolute;
left: 50%;
top: 40%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
width: 75px !important;
height: 75px !important;
margin: 0px 0 0 -30px;
}
.cssload-loader {
position: relative;
left: calc(50% - 60px);
width: 120px;
height: 120px;
background-image: url(assests/dp-loader8.gif);
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
perspective: 1200px
}
.cssload-inner {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%
}
.cssload-inner.cssload-one {
left: 0;
top: 0;
animation: cssload-rotate-one .85s linear infinite;
-o-animation: cssload-rotate-one .85s linear infinite;
-ms-animation: cssload-rotate-one .85s linear infinite;
-webkit-animation: cssload-rotate-one .85s linear infinite;
-moz-animation: cssload-rotate-one .85s linear infinite;
border-bottom: 5px solid #A7784A;
}
.cssload-inner.cssload-two {
right: 0;
top: 0;
animation: cssload-rotate-two .85s linear infinite;
-o-animation: cssload-rotate-two .85s linear infinite;
-ms-animation: cssload-rotate-two .85s linear infinite;
-webkit-animation: cssload-rotate-two .85s linear infinite;
-moz-animation: cssload-rotate-two .85s linear infinite;
border-right: 5px solid #A7784A;
}
.cssload-inner.cssload-three {
right: 0;
bottom: 0;
animation: cssload-rotate-three .85s linear infinite;
-o-animation: cssload-rotate-three .85s linear infinite;
-ms-animation: cssload-rotate-three .85s linear infinite;
-webkit-animation: cssload-rotate-three .85s linear infinite;
-moz-animation: cssload-rotate-three .85s linear infinite;
border-top: 5px solid #A7784A;
}
#keyframes cssload-rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-o-keyframes cssload-rotate-one {
0% {
-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-ms-keyframes cssload-rotate-one {
0% {
-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-webkit-keyframes cssload-rotate-one {
0% {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#-moz-keyframes cssload-rotate-one {
0% {
-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
}
100% {
-moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
}
}
#keyframes cssload-rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-o-keyframes cssload-rotate-two {
0% {
-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-ms-keyframes cssload-rotate-two {
0% {
-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-webkit-keyframes cssload-rotate-two {
0% {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#-moz-keyframes cssload-rotate-two {
0% {
-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
}
100% {
-moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
}
}
#keyframes cssload-rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-o-keyframes cssload-rotate-three {
0% {
-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-ms-keyframes cssload-rotate-three {
0% {
-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-webkit-keyframes cssload-rotate-three {
0% {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
#-moz-keyframes cssload-rotate-three {
0% {
-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
}
100% {
-moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-loader">
<div class="loader">
<div class="cssload-loader">
<div class="cssload-inner cssload-one"></div>
<div class="cssload-inner cssload-two"></div>
<div class="cssload-inner cssload-three"></div>
</div>
</div>
</div>

Repeating the whole css sequence in loop

I have a piece of a code which animates text within a div. I want this whole animation to repeat in loop. It's important to keep all files internal as it's going to be a GoogleAds advert and they don't accept external links. Ideally if that can be done using CSS or plain javascript (not jquery)
Here is the code:
* {
font-family: 'Comfortaa'
}
.ad {
margin: 0 auto;
overflow: hidden;
position: relative;
color: #3a3a3a;
background: #0E6AAD;
width: 300px;
height: 250px;
background-size: 300px 250px;
}
.h1-background {
color: white;
text-align: center;
}
h1 {
font-family: 'Baloo';
position: relative;
padding: 10px;
padding-bottom: 0;
font-size: 24px;
font-weight: normal;
margin: 0;
z-index: 1;
}
h2 {
position: relative;
padding: 0 10px;
font-size: 16px;
z-index: 1;
}
<div class="ad">
<div class="h1-background">
<h1 class="slide-up-fade-in">Title
<h1>
<h2 class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
jfiddle here
Thank you for help.
I hope this is what you are expecting.
setInterval(function(){
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900);
setInterval(function(){
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000);
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
or in jsfidle : https://jsfiddle.net/hbw1uetr/22/
EDIT
If you want to loop n times you need to specify when you want to destroy the setInterval function. Tou can find the updated jsfiddle https://jsfiddle.net/hbw1uetr/59/
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
setIntervalX(function () {
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900, 2);
setIntervalX(function () {
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000, 2); //2 is the number of repition
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
try this:
.slide-up-fade-in{
animation: slide-up-fade-in ease 4s;
animation-iteration-count: infinite;
animation-delay: 0.25s;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.25s;}
I have found another way of doing this (looping 3 times):
.slide-up-fade-in{
animation: slide-up-fade-in ease 5s;
animation-iteration-count: 3;
animation-delay: 1.25s;
}
.delay-1{animation-delay: 1.25s;}
.delay-2{animation-delay: 1.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
10% {
opacity:1;
transform: translate(0px,0px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
for looping forever, replace animation0iteration-count from 3 to infinite

Links to animated background image landing page

I have a landing page with 8 background images using a javascript to animate it fading in/out and I'd like to add links to each of the images when they appear. Is this possible?
If so, what do I need to change into the code, I tried by adding (a) at the (ul) but didn't work.
Thank you,
Max
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
* Build: http://www.modernizr.com/download/#-cssanimations-iepp-cssclasses-testprop-testallprops-domprefixes-load
*/
;window.Modernizr=function(a,b,c){function A(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return z(d,b)}function z(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function v(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)},o.cssanimations=function(){return A("animationName")};for(var B in o)u(o,B)&&(s=B.toLowerCase(),e[s]=o[B](),r.push((e[s]?"":"no-")+s));v(""),j=l=null,a.attachEvent&&function(){var a=b.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1}()&&function(a,b){function s(a){var b=-1;while(++b<g)a.createElement(f[b])}a.iepp=a.iepp||{};var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{\}]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;d.getCSS=function(a,b){if(a+""===c)return"";var e=-1,f=a.length,g,h=[];while(++e<f){g=a[e];if(g.disabled)continue;b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}return h.join("")},d.parseCSS=function(a){var b=[],c;while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);return b.join("\n")},d.writeHTML=function(){var a=-1;r=r||b.body;while(++a<g){var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")},d._beforePrint=function(){p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()},d.restoreHTML=function(){o.innerHTML="",m.removeChild(o),m.appendChild(r)},d._afterPrint=function(){d.restoreHTML(),p.styleSheet.cssText=""},s(b),s(l);d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}(a,b),e._version=d,e._domPrefixes=n,e.testProp=function(a){return z([a])},e.testAllProps=A,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+r.join(" "):"");return e}(this,this.document),function(a,b,c){function k(a){return!a||a=="loaded"||a=="complete"}function j(){var a=1,b=-1;while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;a&&g()}function i(a){var c=b.createElement("script"),d;c.src=a.s,c.onreadystatechange=c.onload=function(){!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)},m(function(){d||(d=1,j())},H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}function h(a){var c=b.createElement("link"),d;c.href=a.s,c.rel="stylesheet",c.type="text/css";if(!a.e&&(w||r)){var e=function(a){m(function(){if(!d)try{a.sheet.cssRules.length?(d=1,j()):e(a)}catch(b){b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){j()},0)):e(a)}},0)};e(c)}else c.onload=function(){d||(d=1,m(function(){j()},0))},a.e&&c.onload();m(function(){d||(d=1,j())},H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}function g(){var a=p.shift();q=1,a?a.t?m(function(){a.t=="c"?h(a):i(a)},0):(a(),j()):q=0}function f(a,c,d,e,f,h){function i(){!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){u.removeChild(l)},0))}var l=b.createElement(a),o=0,r={t:d,s:c,e:h};l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){r.e=r.r=1,g()}),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){o||(u.removeChild(l),r.r=r.e=o=1,j())},H.errorTimeout)}function e(a,b,c){var d=b=="c"?z:y;q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());return this}function d(){var a=H;a.loader={load:e,i:0};return a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){return o.call(a)=="[object Array]"},B=function(a){return Object(a)===a},C=function(a){return typeof a=="string"},D=function(a){return o.call(a)=="[object Function]"},E=[],F={},G,H;H=function(a){function f(a){var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={url:d,origUrl:d,prefixes:b},g,h;for(h=0;h<e;h++)g=F[b[h]],g&&(f=g(f));for(h=0;h<c;h++)f=E[h](f);return f}function e(a,b,e,g,h){var i=f(a),j=i.autoCallback;if(!i.bypass){b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);if(i.instead)return i.instead(a,b,e,g,h);e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)})}}function b(a,b){function c(a){if(C(a))e(a,h,b,0,d);else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;c(f),c(g),a.complete&&b.load(a.complete)}var g,h,i=this.yepnope.loader;if(C(a))e(a,0,i,0);else if(A(a))for(g=0;g<a.length;g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);else B(a)&&b(a,i)},H.addPrefix=function(a,b){F[a]=b},H.addFilter=function(a){E.push(a)},H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"},0)),a.yepnope=d()}(this,this.document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent;
}
.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 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s 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 42s linear infinite 0s;
-moz-animation: titleAnimation 42s linear infinite 0s;
-o-animation: titleAnimation 42s linear infinite 0s;
-ms-animation: titleAnimation 42s linear infinite 0s;
animation: titleAnimation 42s 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/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
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;
}
.cb-slideshow li:nth-child(3) span {
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;
}
.cb-slideshow li:nth-child(4) span {
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;
}
.cb-slideshow li:nth-child(5) span {
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;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/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/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/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(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;
}
/* 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
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Oikos Creative Lab / Communication Design</title>
<meta name="description" content="Oikos é un’agenzia di comunicazione e design che offre soluzioni strategiche cross media.">
<link rel="stylesheet" type="text/css" href="CSS3FullscreenSlideshow/css/demo.css" />
<link rel="stylesheet" type="text/css" href="CSS3FullscreenSlideshow/css/style1.css" />
<style type="text/css">
#dati {
float: left;
margin-left: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: left;
font-size: small;
height: 20px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
width: 40%;
}
#book {
float: left;
margin-left: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: left;
font-size: small;
height: 0x;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
width: 175px;
}
#footer {
float: right;
margin-right: 2%;
color: #FFFDFD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
text-align: right;
font-size: small;
height: 20px;
width: 250px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 5px;
}
.contenitore {
background-color: #000000;
height: 60px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 9999;
opacity: 0.5;
}
.contenitore #footer a {
color: #808080;
text-decoration: none;
}
.contenitore #footer a:hover {
color: #FFFFFF;
text-decoration: none;
}
</style>
<script type="text/javascript" src="CSS3FullscreenSlideshow/js/modernizr.custom.86080.js"></script>
</head>
<body>
<ul class="cb-slideshow">
<li><span>Image 01</span>
</li>
<li><span>Image 02</span>
</li>
<li><span>Image 03</span>
</li>
<li><span>Image 04</span>
</li>
<li><span>Image 05</span>
</li>
<li><span>Image 06</span>
</li>
<li><span>Image 07</span>
</li>
<li><span>Image 08</span>
</li>
</ul>
<div class="clr"></div>
<div class="contenitore">
<div id="dati">oikos creative lab s.r.l. / via volturno 16 20900 monza mb it
<br>t.+39 0392301644 / info#oikoscreativelab.com
</div>
<div id="book">download our porfolio
<img src="CSS3FullscreenSlideshow/images/acro_ico.png" width="30" height="34" alt="" />
</div>
<div id="footer">c.f. p.iva 09201110963 / r.i. MB-1903327
<br>capitale sociale: € 10.000,00 i.v.</div>
</div>
</body>
</html>

how to make cb slideshow stop after complete 1 loop which have 6 slider images

I have cb-slideshow by using html and css
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3></h3></div></li>
<li><span>Image 02</span><div><h3></h3></div></li>
<li><span>Image 03</span><div><h3></h3></div></li>
<li><span>Image 04</span><div><h3></h3></div></li>
<li><span>Image 05</span><div><h3></h3></div></li>
<li><span>Image 06</span><div><h3></h3></div></li>
</ul>
But I want stop slides after 1 loop , that mean after complete 1 cycle with all the images.
the css codes are below
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 484px;
top: 0px;
left: 0px;
z-index: 0;
overflow: hidden;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
overflow: hidden;
}
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
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 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);/** OW_Control type:color, key:slidertextColor, section:2. Colors, label: - header slider Text color **/
padding-bottom: 20px;
cursor: crosshair;
}
.cb-slideshow li:nth-child(1) span { background-image: url(images/6.jpg);/** OW_Control type:image, key:slideImage6, section: 0. Header Slides, label: Slide 6 **/ }
.cb-slideshow li:nth-child(2) span {
background-image: url(images/5.jpg);/** OW_Control type:image, key:slideImage5, section: 0. Header Slides, label: Slide 5 **/
-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/4.jpg);/** OW_Control type:image, key:slideImage4, section: 0. Header Slides, label: Slide 4 **/
-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/3.jpg);/** OW_Control type:image, key:slideImage3, section: 0. Header Slides, label: Slide 3 **/
-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/2.jpg);/** OW_Control type:image, key:slideImage2, section: 0. Header Slides, label: Slide 2 **/
-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/1.jpg);/** OW_Control type:image, key:slideImage1, section: 0. Header Slides, label: Slide 1 **/
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.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;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { 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: 100px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Right now in the CSS you are setting the animation-iteration-count to infinite, so the animation is looping all the time. If you want the animation to stop the slides after one loop only, then set the value of animation-iteration-count to 1.
You would just need to change these two rules and that should do it:
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
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 36s linear 1 0s;
-moz-animation: imageAnimation 36s linear 1 0s;
-o-animation: imageAnimation 36s linear 1 0s;
-ms-animation: imageAnimation 36s linear 1 0s;
animation: imageAnimation 36s linear 1 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear 1 0s;
-moz-animation: titleAnimation 36s linear 1 0s;
-o-animation: titleAnimation 36s linear 1 0s;
-ms-animation: titleAnimation 36s linear 1 0s;
animation: titleAnimation 36s linear 1 0s;
}

Keep div static when other appears

I have a jsfiddle as follows:
http://jsfiddle.net/aritro33/uX7HG/
And I have a problem that when you hit the compose button, the post that appears gets pushed down slightly, but noticeably, by the arrangement of colors that pops up seconds later. How do I keep the post from moving as the arrangement of colors pops up?
Thanks!
HTML:
<div id="red" class = "color"></div>
<div id="orange" class = "color"></div>
<div id="yellow" class = "color"></div>
<div id="green" class = "color"></div>
<div id="turquoise" class = "color"></div>
<div id="blue" class = "color"></div>
<div id="purple" class = "color"></div>
<div id="gray" class = "color"></div>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
<div id = "sidebarhex"></div>
<div id = "taghex"><span id = "withhex" contenteditable = "true">#2AC0A3</span></div>
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
CSS:
#red {
background-color: #2ac0a3;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
position: relative;
bottom: 220px;
left: 365px;
}
#orange {
background-color: #25ac92;
position:relative;
bottom:236px;
left: 405px;
}
#yellow {
position: relative;
bottom: 252px;
left: 445px;
background-color:#219982;
}
#green {
position: relative;
left: 485px;
bottom: 268px;
background-color: #1d8672;
}
#turquoise {
position: relative;
left: 525px;
bottom: 284px;
background-color: #197361;
}
#blue {
position: relative;
left: 565px;
bottom: 300px;
background-color: #156051;
}
#purple {
position: relative;
left: 605px;
bottom: 316px;
background-color: #104c41;
}
#gray {
position: relative;
left: 645px;
bottom: 332px;
background-color: #0c3930;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 320px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 100px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 320px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#sidebarhex{
height: 30px;
width: 7px;
background-color: #156051;
position: relative;
left: 500px;
bottom: 30px;
}
#taghex{
height: 30px;
width: 80px;
background-color: #219982;
position: relative;
left: 420px;
bottom: 60px;
}
#withhex{
font-family: 'Roboto';
position: relative;
top: 4px;
left: 9px;
border: 0px solid transparent;
outline: none;
}
.color{
height: 16px;
width: 40px;
}
#red.active{
height: 16px;
width: 45px;
z-index: 1;
border: 3px solid white;
position: relative;
bottom: 218px;
}
#orange.active{
height: 16px;
width: 45px;
z-index: 1;
border: 3px solid white;
position: relative;
bottom: 233px;
}
#red.orangeselected{
position: relative;
bottom: 215px;
}
Animation CSS:
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
JS:
$('#red').click(function(){
$('#red').addClass('active');
$('#red').removeClass('orangeselected');
$('#orange').removeClass('active');
});
$('#orange').click(function(){
$('#orange').addClass('active');
$('#red').removeClass('active');
$('#red').addClass('orangeselected');
});
$('#sidebarhex').fadeTo(0,1);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
setTimeout(function () {
setTimeout(function () {
$('#red').fadeTo(0, 400);
$('#orange').fadeTo(0, 400);
$('#yellow').fadeTo(0, 400);
$('#green').fadeTo(0, 400);
$('#turquoise').fadeTo(0, 400);
$('#blue').fadeTo(0, 400);
$('#purple').fadeTo(0, 400);
$('#gray').fadeTo(0, 400);
}, 400);
$('#red').addClass('box animated bounceInUp');
$('#orange').addClass('box animated bounceInUp');
$('#yellow').addClass('box animated bounceInUp');
$('#green').addClass('box animated bounceInUp');
$('#turquoise').addClass('box animated bounceInUp');
$('#blue').addClass('box animated bounceInUp');
$('#purple').addClass('box animated bounceInUp');
$('#gray').addClass('box animated bounceInUp');
}, 500);
setTimeout(function(){
$('#red').addClass('active');
}, 1050);

Categories