We Keep Coding

changing the width of h1

I have this code below that allows the text to fade in nicely. However, as you can see when I run it below, it doesn't show the entire text specified in the h1. So i am a little confused on how to fix this, because looking at the css, it is not specifying where the width of the div or h1 actually is.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>
does anybody have any ideas how to possibly fix this?

This has nothing to do with the width of the h1, but with your CSS animations: You are defining fade-ins for 10 spans, but you have 12 of them, so the 11th and 12th remain invisible - see below, where I added selectors for them to the rule for the 10th child span:
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if(string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.8s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(10),
.container h1 span:nth-child(11),
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(7) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(6) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>

You did not include enough :nth-child elements in your animation. I changed the last one you had, I believe was 10, to the proper number -> 12.
I figured this out by inspecting the browser inspector and looking at how many span tags were being created by your JS function. I then went back and replaced the last span CSS animation from 10 to 12 and worked backward down the line changing each one down the line...
I also added the proper amount of animations and animation duration for 5, 6 and 7 respectively though you may want to play around with those on your end.
var spanText = function spanText(text) {
var string = text.innerText;
var spaned = '';
for (var i = 0; i < string.length; i++) {
if (string.substring(i, i + 1) === ' ') spaned += string.substring(i, i + 1);
else spaned += '<span>' + string.substring(i, i + 1) + '</span>';
}
text.innerHTML = spaned;
}
var headline = document.querySelector("h1");
spanText(headline);
#import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,600,700&display=swap');
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Oswald', helvetica;
background-color: #333;
color: #fff;
height: 100vh;
font-size: 30px;
}
.container h1 span {
letter-spacing: 3px;
font-weight: 300;
display: inline-block;
opacity: 0;
text-transform: uppercase;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
.container h1 span:nth-child(1) {
animation-delay: 0.2s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(2) {
animation-delay: 0.3s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(3) {
animation-delay: 0.4s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(4) {
animation-delay: 0.6s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(5) {
animation-delay: .7s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(6) {
animation-delay: .9s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(7) {
animation-delay: 1s;
animation-name: fadeInLeft;
}
.container h1 span:nth-child(12) {
animation-delay: 0s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(11) {
animation-delay: 0.2s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(10) {
animation-delay: 0.4s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(9) {
animation-delay: 0.6s;
animation-name: fadeInRight;
}
.container h1 span:nth-child(8) {
animation-delay: 0.8s;
animation-name: fadeInRight;
}
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(10%, 30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-10%, -30%, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
<div class="container">
<h1>
Superrr Coool
</h1>
</div>

how to make wave animation?

I want to make a wave. There is sample animation that i made. so i want to change this animation like this. there is number of rectangles. Expanding both sides of the rectangle
What i want to do is this time rectangle is expanding both sides(Up & down sides) but i want to expand only on side(up side) like music player.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50%{
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Just set the transform-origin of the span to bottom center(default is center center).
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div {
width: 1300px;
height: 300px;
margin: 100px auto;
}
span {
display: inline-block;
background-color: green;
width: 20px;
height: 20px;
animation: wave 1s linear infinite;
transform-origin: bottom center;
}
.a1 {
animation-delay: .0s;
}
.a2 {
animation-delay: .2s;
}
.a3 {
animation-delay: .3s;
}
.a4 {
animation-delay: .4s;
}
.a5 {
animation-delay: .5s;
}
.a6 {
animation-delay: .6s;
}
.a7 {
animation-delay: .7s;
}
.a8 {
animation-delay: .8s;
}
.a9 {
animation-delay: .9s;
}
.a10 {
animation-delay: 1.0s;
}
#keyframes wave {
50% {
transform: scaleY(80);
transform: scaleY(5);
}
}
<div>
<span class="a1"></span>
<span class="a2"></span>
<span class="a3"></span>
<span class="a4"></span>
<span class="a5"></span>
<span class="a6"></span>
<span class="a7"></span>
<span class="a8"></span>
<span class="a9"></span>
<span class="a10"></span>
</div>

Delay loading of images in slideshow with setTimeout

I have a fullscreen slideshow that consists of 4 slides, but I do not want to load all images at the same time, so I thought of adding a setTimeout in javascript like this:
$(document).ready(function(){
setTimeout(function(){
$('.cb-slideshow li:nth-child(2) span').css("background-image: url(/slides/2.jpg)");
}, 5000);
The slideshow consists of 6 elements, each animated in with keyframes.
Slides:
.cb-slideshow li:nth-child(1) span {
background-image: url(/slides/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(/slides/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(/slides/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(/slides/4.jpg);
animation-delay: 18s;
}
Slideshow:
<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>
</ul>
Style:
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -2;
list-style: none
}
.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: -2;
-webkit-backface-visibility: hidden;
animation: imageAnimation 24s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 90px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 24s linear infinite 0s;
-moz-animation: titleAnimation 24s linear infinite 0s;
-o-animation: titleAnimation 24s linear infinite 0s;
-ms-animation: titleAnimation 24s linear infinite 0s;
animation: titleAnimation 24s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.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;
}
But it's not working. Can I even have li:nth-child(2) inside a script? Any ideas?

Delay loading of images in slideshow with setTimeout?
This would be my approach.
Adjust your HTML, by adding your image src's as attributes i.e. data-bg-src="/slides/2.jpg":
<ul class="cb-slideshow">
<li>
<span style="background-image:url('https://picsum.photos/1200/800?image=0')">Image 01</span>
</li>
<li>
<span data-bg-src="https://picsum.photos/1200/800?image=1">Image 02</span>
</li>
<li>
<span data-bg-src="https://picsum.photos/1200/800?image=2">Image 03</span>
</li>
<li>
<span data-bg-src="https://picsum.photos/1200/800?image=3">Image 04</span>
</li>
</ul>
JavaScript:
(function() {
const bgSrcs = document.querySelectorAll('[data-bg-src]');
for (let i = 0, m = bgSrcs.length; i < m; i++) {
setTimeout(() => {
bgSrcs[i].style.backgroundImage = 'url(' + bgSrcs[i].dataset.bgSrc + ')';
// Or in jQuery
// $(bgSrcs[i]).css('background-image: url(' + bgSrcs[i].dataset.bgSrc + ')');
}, i * 1000); // Stagger the load
}
})();
JSFiddle (Open the console)
I presume this is in an effort to increase performance by lazy loading images. If this is the case, there are far better ways of doing this. Among the many resources out there, this one on CSS Tricks appears to be the most comprehensive and up-to-date.
EDIT 1:
Your CSS is broken too. You'll need to add the following, if your adding the background-images to the <span>:
.cb-slideshow li{
width: 100%;
height: 100%;
position: absolute;
}
And remove opacity: 0; from .cb-slideshow li span {}.
Below is an example of this in action.

Animation of falling object not working on IE

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);
}
}

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;
}