How might I do this? I'm trying to use css3 only for performance reasons (fade in can get kind of choppy).
Right now they all happen at the same time.
function fadeInPlaylist(elem) {
elem.css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i) {
setTimeout(fadeInPlaylist($(this)),2500*i);
});
});
You are calling setTimeout incorrectly.
setTimeout(fadeInPlaylist($(this)),2500*i);
should be:
setTimeout(function(){fadeInPlaylist($(this));},2500*i);
Also, here's a working fiddle: http://jsfiddle.net/q7Wa8/
If you really need to do it with CSS3 only, use this code:
#keyframes reset {
0% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes fade-in {
0% { opacity: 0; }
60% { opacity: 0; }
100% { opacity: 1; }
}
.playlist {
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay: 0, 0;
}
But you'll have compatibility issues.
Here's the cross-browser code, doesn't work in IE:
#keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
#-webkit-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#-webkit-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
#-moz-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#-moz-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
#-o-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
#-o-keyframes fade-in { 0% { opacity: 0; } 60% { opacity: 0; } 100% { opacity: 1; } }
.playlist {
animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in;
animation-iteration-count: 1;
animation-delay: 0, 0;
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: 2.5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0, 0;
-moz-animation-name: reset, fade-in;
-moz-animation-duration: 2.5s;
-moz-animation-timing-function: ease-in;
-moz-animation-iteration-count: 1;
-moz-animation-delay: 0, 0;
-o-animation-name: reset, fade-in;
-o-animation-duration: 2.5s;
-o-animation-timing-function: ease-in;
-o-animation-iteration-count: 1;
-o-animation-delay: 0, 0;
}
You could use fadeTo with delay but if you want to do it your way try this:
function fadeInPlaylist() {
$(this).css('opacity',1);
}
$(window).load(function() {
$('.playlist').each(function(i, e) {
setTimeout(function(){ fadeInPlaylist.call(e); }, 1000 * i);
});
});
Demo: http://jsbin.com/oyazof/1/edit
Edit:
If you want to do it with CSS3 transitions you can just add a class instead of changing the css from jQuery.
jQuery:
function fadeInPlaylist() {
$(this).addClass('opacity');
}
CSS:
.opacity {
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-ms-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
opacity: 1;
}
Demo with CSS3 transitions: http://jsbin.com/oyazof/3/edit
Just change:
elem.css('opacity',1);
To:
elem.fadeTo('fast', 1);
Related
my target is to animate a loading spinner. After a ajax call is finished the spinner should finish the last rotation but stop than. In FF, Chrome and Opera it is working fine with just adding a class with
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
but in Safari (11.1.2) it is still running.
I think it is just something small to change but I don't find it. My idea is that safari doesn't let me change the animation while running so I can't change.
Code:
function stop()
{
document.getElementById("box").classList.add("stop");
}
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animationRotateFrames linear 2s;
animation: animationRotateFrames linear 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.stop
{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
button
{
margin-top: 40px;
padding: 20px;
}
#-moz-keyframes animationRotateFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(359deg) ;
}
}
#-webkit-keyframes animationRotateFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(359deg) ;
}
}
#keyframes animationRotateFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
HTML
<div id="box"></div>
<button onclick="stop()">Stop</button>
Just as a demo:
JSFiddle
I'm creating a CSS3/HTML5 banner ad and want to loop the animations over once they're all complete. I know there's a method to check with Javascript to check if a particular animation has ended, however I cannot figure out how to then restart the animations from all of their start points.
Essentially I have 3 'frames' with different information, each one will fade in and then fade back out, to be replaced with the next frame - once the last frame has faded back out, I want the animations to start over again. Doing this solely with CSS3 is way too tricky, because the timings of the animations and points in which the opacity is set to 0 have to be different for each animation.
As you can see from the JSFiddle, it plays once, then stops which is great, now I just need to re-trigger the animation once click_through2 finishes executing the animation.
JSFiddle
.test {
height: 250px;
position: relative;
width: 300px;
overflow: hidden;
}
.test div, .test a, .logo, .sfv2 {
position: absolute;
}
.title {
bottom: 45px;
left: 5px;
right: 5px;
}
.title h2 {
color: #fff;
font-family: Helvetica,arial,sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
margin: 0;
text-align: center;
}
.click_through {
background-color: #fff200;
border-radius: 5px;
bottom: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
color: #ce1e25;
font-family: Helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 700;
left: 0;
line-height: 1;
margin: 0 auto;
padding: 5px;
right: 0;
text-align: center;
width: 70px;
text-decoration: none;
}
.click_through1 {
animation: tbio 7s ease-out 0s both;
-moz-animation: tbio 7s ease-out 0s both;
-webkit-animation: tbio 7s ease-out 0s both;
-ms-animation: tbio 7s ease-out 0s both;
-o-animation: tbio 7s ease-out 0s both;
}
.click_through2 {
animation: tbio 7s ease-out 10s both;
-moz-tbio tbio 7s ease-out 10s both;
-webkit-tbio tbio 7s ease-out 10s both;
-ms-tbio tbio 7s ease-out 10s both;
-o-tbio tbio 7s ease-out 10s both;
width: 80px;
}
.logo {
top: 8px;
left: 8px;
}
.title1 {
animation: ltrio 6s ease 0s both;
-moz-animation: ltrio 6s ease 0s both;
-webkit-animation: ltrio 6s ease 0s both;
-ms-animation: ltrio 6s ease 0s both;
-o-animation: ltrio 6s ease 0s both;
}
.title2, .title3 {
opacity: 0;
}
.title2 {
animation: ltrio 6s ease 5.5s both;
-moz-animation: ltrio 6s ease 5.5s both;
-webkit-animation: ltrio 6s ease 5.5s both;
-ms-animation: ltrio 6s ease 5.5s both;
-o-animation: ltrio 6s ease 5.5s both;
}
.title3 {
animation: ltrio 6s ease 10s both;
-moz-nimation: ltrio 6s ease 10s both;
-webkit-nimation: ltrio 6s ease 10s both;
-ms-onimation: ltrio 6s ease 10s both;
-o-nimation: ltrio 6s ease 10s both;
}
.sfv2 {
right: 12px;
top: 34px;
animation: fio 6s ease 11s both;
-moz-animation: fio 6s ease 11s both;
-webkit-animation: fio 6s ease 11s both;
-ms-animation: fio 6s ease 11s both;
-o-animation: fio 6s ease 11s both;
}
#keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes ltrio {
0% {
-ms-transform: translateY(-350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes ltrio {
0% {
-o-transform: translateX(-350px);
opacity: 0;
}
25% {
-o-transform: translateX(0);
opacity: 1;
}
75% {
-o-transform: translateX(0);
opacity: 1;
}
100% {
-o-transform: translateX(350px);
opacity: 0;
}
}
#keyframes tbio {
0% {
transform: translateY(350px);
opacity: 0;
}
25% {
transform: translateY(0);
opacity: 1;
}
75% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(350px);
opacity: 0;
}
}
#-moz-keyframes tbio {
0% {
-moz-transform: translateY(350px);
opacity: 0;
}
25% {
-moz-transform: translateY(0);
opacity: 1;
}
75% {
-moz-transform: translateY(0);
opacity: 1;
}
100% {
-moz-transform: translateY(350px);
opacity: 0;
}
}
#-webkit-keyframes tbio {
0% {
-webkit-transform: translateY(350px);
opacity: 0;
}
25% {
-webkit-transform: translateY(0);
opacity: 1;
}
75% {
-webkit-transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(350px);
opacity: 0;
}
}
#-ms-keyframes tbio {
0% {
-ms-transform: translateY(350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes tbio {
0% {
-o-transform: translateY(350px);
opacity: 0;
}
25% {
-o-transform: translateY(0);
opacity: 1;
}
75% {
-o-transform: translateY(0);
opacity: 1;
}
100% {
-o-transform: translateY(350px);
opacity: 0;
}
}
#keyframes fio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="test">
<img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
<div class="title title1">
<h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
</div>
<div class="title title2">
<h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
</div>
<div class="title title3">
<h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
</div>
<a class="click_through click_through1" href="/">View here</a>
<a class="click_through click_through2" href="/">Learn more</a>
</div>
You could check for the end of the animation by responding to the endanimation event (of which there are several browser-dependent variants), reloading the relevant nodes, and repeating the whole process. Note I applied a factor 10 to the speed of the animations so you can see the effect faster:
// Define a function that listens to all prefix variants of endanimation events:
function whenAnimationEnd(element, callback) {
element.addEventListener('animationend', callback, false);
element.addEventListener('webkitAnimationEnd', callback, false);
element.addEventListener('oanimationend', callback, false);
element.addEventListener('MSAnimationEnd', callback, false);
}
(function repeat() {
whenAnimationEnd(document.querySelector('.click_through2'), function(e) {
var container = document.querySelector('.ad_container');
var dupe = container.cloneNode(true);
container.parentNode.replaceChild(dupe, container);
repeat();
});
}());
.ad_container {
height: 250px;
position: relative;
width: 300px;
overflow: hidden;
}
.ad_container div, .ad_container a, .logo, .sfv2 {
position: absolute;
}
.title {
bottom: 45px;
left: 5px;
right: 5px;
}
.title h2 {
color: #fff;
font-family: Helvetica,arial,sans-serif;
font-size: 21px;
font-weight: 400;
line-height: 1;
margin: 0;
text-align: center;
}
.click_through {
background-color: #fff200;
border-radius: 5px;
bottom: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);
color: #ce1e25;
font-family: Helvetica,arial,sans-serif;
font-size: 14px;
font-weight: 700;
left: 0;
line-height: 1;
margin: 0 auto;
padding: 5px;
right: 0;
text-align: center;
width: 70px;
text-decoration: none;
}
.click_through1 {
animation: tbio 0.7s ease-out 0s both;
-moz-animation: tbio 0.7s ease-out 0s both;
-webkit-animation: tbio 0.7s ease-out 0s both;
-ms-animation: tbio 0.7s ease-out 0s both;
-o-animation: tbio 0.7s ease-out 0s both;
}
.click_through2 {
animation: tbio 0.7s ease-out 1s both;
-moz-tbio tbio 0.7s ease-out 1s both;
-webkit-tbio tbio 0.7s ease-out 1s both;
-ms-tbio tbio 0.7s ease-out 1s both;
-o-tbio tbio 0.7s ease-out 1s both;
width: 80px;
}
.logo {
top: 8px;
left: 8px;
}
.title1 {
animation: ltrio 0.6s ease 0s both;
-moz-animation: ltrio 0.6s ease 0s both;
-webkit-animation: ltrio 0.6s ease 0s both;
-ms-animation: ltrio 0.6s ease 0s both;
-o-animation: ltrio 0.6s ease 0s both;
}
.title2, .title3 {
opacity: 0;
}
.title2 {
animation: ltrio 0.6s ease 0.55s both;
-moz-animation: ltrio 0.6s ease 0.55s both;
-webkit-animation: ltrio 0.6s ease 0.55s both;
-ms-animation: ltrio 0.6s ease 0.55s both;
-o-animation: ltrio 0.6s ease 0.55s both;
}
.title3 {
animation: ltrio 0.6s ease 1s both;
-moz-nimation: ltrio 0.6s ease 1s both;
-webkit-nimation: ltrio 0.6s ease 1s both;
-ms-onimation: ltrio 0.6s ease 1s both;
-o-nimation: ltrio 0.6s ease 1s both;
}
.sfv2 {
right: 12px;
top: 34px;
animation: fio 0.6s ease 1.1s both;
-moz-animation: fio 0.6s ease 1.1s both;
-webkit-animation: fio 0.6s ease 1.1s both;
-ms-animation: fio 0.6s ease 1.1s both;
-o-animation: fio 0.6s ease 1.1s both;
}
#keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes ltrio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes ltrio {
0% {
-ms-transform: translateY(-350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes ltrio {
0% {
-o-transform: translateX(-350px);
opacity: 0;
}
25% {
-o-transform: translateX(0);
opacity: 1;
}
75% {
-o-transform: translateX(0);
opacity: 1;
}
100% {
-o-transform: translateX(350px);
opacity: 0;
}
}
#keyframes tbio {
0% {
transform: translateY(350px);
opacity: 0;
}
25% {
transform: translateY(0);
opacity: 1;
}
75% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(350px);
opacity: 0;
}
}
#-moz-keyframes tbio {
0% {
-moz-transform: translateY(350px);
opacity: 0;
}
25% {
-moz-transform: translateY(0);
opacity: 1;
}
75% {
-moz-transform: translateY(0);
opacity: 1;
}
100% {
-moz-transform: translateY(350px);
opacity: 0;
}
}
#-webkit-keyframes tbio {
0% {
-webkit-transform: translateY(350px);
opacity: 0;
}
25% {
-webkit-transform: translateY(0);
opacity: 1;
}
75% {
-webkit-transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(350px);
opacity: 0;
}
}
#-ms-keyframes tbio {
0% {
-ms-transform: translateY(350px);
opacity: 0;
}
25% {
-ms-transform: translateY(0);
opacity: 1;
}
75% {
-ms-transform: translateY(0);
opacity: 1;
}
100% {
-ms-transform: translateY(350px);
opacity: 0;
}
}
#-o-keyframes tbio {
0% {
-o-transform: translateY(350px);
opacity: 0;
}
25% {
-o-transform: translateY(0);
opacity: 1;
}
75% {
-o-transform: translateY(0);
opacity: 1;
}
100% {
-o-transform: translateY(350px);
opacity: 0;
}
}
#keyframes fio {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
50% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
<div class="ad_container">
<img class="sfv1" src="http://i.imgur.com/3VWKopF.jpg">
<div class="title title1">
<h2>Great value<br/> <strong>Spanish Properties</strong><br/> starting at £65k</h2>
</div>
<div class="title title2">
<h2>Stunning properties in <br/><strong>Costa del Sol, <br/>Blanca & Murcia</strong></h2>
</div>
<div class="title title3">
<h2>Over <strong>10,000 <br/>Spanish properties sold</strong></h2>
</div>
<a class="click_through click_through1" href="/">View here</a>
<a class="click_through click_through2" href="/">Learn more</a>
</div>
Use a setTimeout and try setting the animation property to something else and then set it to the classname again so that it restarts the animation.
Something like:
setTimeout(function(){
document.querySelector('.someclass').classList.remove("run-animation").classList.add("run-animation");
}, 1000)
Remove the class to which the animation is assigned to and add it again (maybe with timeout) and the animation starts again.
This question already has answers here:
Repeat animation every 3 seconds
(2 answers)
Closed 7 years ago.
How to implement the code below to my animation, my animation is in infinite loop i want after each animation it will pause for 10 sec then start again, im using animate.css
note: i pasted the keyframe below
setTimeout(function() {
// 1000 == 1 seconds
// modify dom elements here
// your code here
}, 1000);
HTML + CSS code of it
<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>
.motext {
animation-duration: 20s;
animation-delay: 19s;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
width:90%;
max-width:1170px;
margin:auto;
text-align:right;
position:relative;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
#keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
Have not tried animate.css , though should be possible using existing css, by adjusting animation-delay to 10s , animation-direction to alternate , animation-fill-mode to forwards
.motext {
animation-name: x;
animation-duration: 20s;
animation-delay: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease;
animation-direction: alternate;
animation-fill-mode: forwards;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
width: 90%;
max-width: 1170px;
margin: auto;
text-align: right;
position: relative;
color: blue;
}
#keyframes x {
0% {
color: blue;
}
100% {
color: red;
}
}
<h1 class="motext animated fadeInDownBig">THINK QUALITY. THINK LIFELINE.</h1>
I have created multilevel navigation menu using jquery dlmenu plugin v1.0.2 demo2.
Everything works fine, except CSS3 menu navigation is not smooth as jQuery left/right slide functionality is.
Is there any solution to resolve this issue without changing plugin?
/* Animation classes for moving out and in */
.dl-menu.dl-animate-out-2 {
-webkit-animation: MenuAnimOut2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimOut2 0.3s ease-in-out forwards;
animation: MenuAnimOut2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimOut2 {
100% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
}
#-moz-keyframes MenuAnimOut2 {
100% {
-moz-transform: translateX(-100%);
opacity: 0;
}
}
#keyframes MenuAnimOut2 {
100% {
transform: translateX(-100%);
opacity: 0;
}
}
.dl-menu.dl-animate-in-2 {
-webkit-animation: MenuAnimIn2 0.3s ease-in-out forwards;
-moz-animation: MenuAnimIn2 0.3s ease-in-out forwards;
animation: MenuAnimIn2 0.3s ease-in-out forwards;
}
#-webkit-keyframes MenuAnimIn2 {
0% {
-webkit-transform: translateX(-100%);
opacity: 0;
}
100% {
-webkit-transform: translateX(0px);
opacity: 1;
}
}
#-moz-keyframes MenuAnimIn2 {
0% {
-moz-transform: translateX(-100%);
opacity: 0;
}
100% {
-moz-transform: translateX(0px);
opacity: 1;
}
}
#keyframes MenuAnimIn2 {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
You have to use the plugin like this : with animationClasses "in" and "out" not "classin" and "classout"
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { in : 'dl-animate-in-2', out : 'dl-animate-out-2' }
});
});
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;
}