How to set my site loader in middle of screen

How to set my site loader in middle of screen - html

I use a loader of my site but it's position of top of the page how to implement in css to align center of the sereen. Please check the my loader example Demo
**
#fountainTextG{
width:360px;
margin:auto;
}
.fountainTextG{
color:rgb(242,155,97);
font-family:Arial;
font-size:38px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_fountainTextG;
-o-animation-name:bounce_fountainTextG;
-ms-animation-name:bounce_fountainTextG;
-webkit-animation-name:bounce_fountainTextG;
-moz-animation-name:bounce_fountainTextG;
animation-duration:2.09s;
-o-animation-duration:2.09s;
-ms-animation-duration:2.09s;
-webkit-animation-duration:2.09s;
-moz-animation-duration:2.09s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.5);
-o-transform:scale(.5);
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
}#fountainTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#fountainTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#fountainTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#fountainTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#fountainTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#fountainTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#fountainTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
#fountainTextG_8{
animation-delay:1.79s;
-o-animation-delay:1.79s;
-ms-animation-delay:1.79s;
-webkit-animation-delay:1.79s;
-moz-animation-delay:1.79s;
}
#keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:rgb(252,179,116);
}
100%{
transform:scale(.5);
color:rgb(255,255,255);
}
}
#-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-o-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-ms-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-webkit-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-moz-transform:scale(.5);
color:rgb(255,255,255);
}
}
<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>
**
This loader made from pure css3 java script or other library not include with this.

Define your id #fountainTextG
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;
this css
#fountainTextG{
width: 360px;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -75px;
}
.fountainTextG{
color:rgb(242,155,97);
font-family:Arial;
font-size:38px;
text-decoration:none;
font-weight:normal;
font-style:normal;
float:left;
animation-name:bounce_fountainTextG;
-o-animation-name:bounce_fountainTextG;
-ms-animation-name:bounce_fountainTextG;
-webkit-animation-name:bounce_fountainTextG;
-moz-animation-name:bounce_fountainTextG;
animation-duration:2.09s;
-o-animation-duration:2.09s;
-ms-animation-duration:2.09s;
-webkit-animation-duration:2.09s;
-moz-animation-duration:2.09s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-direction:normal;
-o-animation-direction:normal;
-ms-animation-direction:normal;
-webkit-animation-direction:normal;
-moz-animation-direction:normal;
transform:scale(.5);
-o-transform:scale(.5);
-ms-transform:scale(.5);
-webkit-transform:scale(.5);
-moz-transform:scale(.5);
}#fountainTextG_1{
animation-delay:0.75s;
-o-animation-delay:0.75s;
-ms-animation-delay:0.75s;
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;
}
#fountainTextG_2{
animation-delay:0.9s;
-o-animation-delay:0.9s;
-ms-animation-delay:0.9s;
-webkit-animation-delay:0.9s;
-moz-animation-delay:0.9s;
}
#fountainTextG_3{
animation-delay:1.05s;
-o-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-moz-animation-delay:1.05s;
}
#fountainTextG_4{
animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
}
#fountainTextG_5{
animation-delay:1.35s;
-o-animation-delay:1.35s;
-ms-animation-delay:1.35s;
-webkit-animation-delay:1.35s;
-moz-animation-delay:1.35s;
}
#fountainTextG_6{
animation-delay:1.5s;
-o-animation-delay:1.5s;
-ms-animation-delay:1.5s;
-webkit-animation-delay:1.5s;
-moz-animation-delay:1.5s;
}
#fountainTextG_7{
animation-delay:1.64s;
-o-animation-delay:1.64s;
-ms-animation-delay:1.64s;
-webkit-animation-delay:1.64s;
-moz-animation-delay:1.64s;
}
#fountainTextG_8{
animation-delay:1.79s;
-o-animation-delay:1.79s;
-ms-animation-delay:1.79s;
-webkit-animation-delay:1.79s;
-moz-animation-delay:1.79s;
}
#keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:rgb(252,179,116);
}
100%{
transform:scale(.5);
color:rgb(255,255,255);
}
}
#-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-o-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-ms-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-webkit-transform:scale(.5);
color:rgb(255,255,255);
}
}
#-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:rgb(252,179,116);
}
100%{
-moz-transform:scale(.5);
color:rgb(255,255,255);
}
}
<div id="fountainTextG"><div id="fountainTextG_1" class="fountainTextG">M</div><div id="fountainTextG_2" class="fountainTextG">e</div><div id="fountainTextG_3" class="fountainTextG">n</div><div id="fountainTextG_4" class="fountainTextG">s</div><div id="fountainTextG_5" class="fountainTextG">o</div><div id="fountainTextG_6" class="fountainTextG">f</div><div id="fountainTextG_7" class="fountainTextG">t</div><div id="fountainTextG_8" class="fountainTextG">s</div></div>

Put position: fixed and left/top to 50%. Using negative margin move element back via it's half width/height.
Also instead of flaot: left; use display: inline-block
#fountainTextG {
width: 360px;
margin: auto;
position: fixed;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -180px;
text-align: center;
}
.fountainTextG {
color: rgb(242, 155, 97);
font-family: Arial;
font-size: 38px;
text-decoration: none;
font-weight: normal;
font-style: normal;
display: inline-block;
animation-name: bounce_fountainTextG;
-o-animation-name: bounce_fountainTextG;
-ms-animation-name: bounce_fountainTextG;
-webkit-animation-name: bounce_fountainTextG;
-moz-animation-name: bounce_fountainTextG;
animation-duration: 2.09s;
-o-animation-duration: 2.09s;
-ms-animation-duration: 2.09s;
-webkit-animation-duration: 2.09s;
-moz-animation-duration: 2.09s;
animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-direction: normal;
-o-animation-direction: normal;
-ms-animation-direction: normal;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;
transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5);
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
}
#fountainTextG_1 {
animation-delay: 0.75s;
-o-animation-delay: 0.75s;
-ms-animation-delay: 0.75s;
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
}
#fountainTextG_2 {
animation-delay: 0.9s;
-o-animation-delay: 0.9s;
-ms-animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
}
#fountainTextG_3 {
animation-delay: 1.05s;
-o-animation-delay: 1.05s;
-ms-animation-delay: 1.05s;
-webkit-animation-delay: 1.05s;
-moz-animation-delay: 1.05s;
}
#fountainTextG_4 {
animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
}
#fountainTextG_5 {
animation-delay: 1.35s;
-o-animation-delay: 1.35s;
-ms-animation-delay: 1.35s;
-webkit-animation-delay: 1.35s;
-moz-animation-delay: 1.35s;
}
#fountainTextG_6 {
animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
#fountainTextG_7 {
animation-delay: 1.64s;
-o-animation-delay: 1.64s;
-ms-animation-delay: 1.64s;
-webkit-animation-delay: 1.64s;
-moz-animation-delay: 1.64s;
}
#fountainTextG_8 {
animation-delay: 1.79s;
-o-animation-delay: 1.79s;
-ms-animation-delay: 1.79s;
-webkit-animation-delay: 1.79s;
-moz-animation-delay: 1.79s;
}
#keyframes bounce_fountainTextG {
0% {
transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-o-keyframes bounce_fountainTextG {
0% {
-o-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-o-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-ms-keyframes bounce_fountainTextG {
0% {
-ms-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-ms-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-webkit-keyframes bounce_fountainTextG {
0% {
-webkit-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-webkit-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
#-moz-keyframes bounce_fountainTextG {
0% {
-moz-transform: scale(1);
color: rgb(252, 179, 116);
}
100% {
-moz-transform: scale(.5);
color: rgb(255, 255, 255);
}
}
<div id="fountainTextG">
<div id="fountainTextG_1" class="fountainTextG">M</div>
<div id="fountainTextG_2" class="fountainTextG">e</div>
<div id="fountainTextG_3" class="fountainTextG">n</div>
<div id="fountainTextG_4" class="fountainTextG">s</div>
<div id="fountainTextG_5" class="fountainTextG">o</div>
<div id="fountainTextG_6" class="fountainTextG">f</div>
<div id="fountainTextG_7" class="fountainTextG">t</div>
<div id="fountainTextG_8" class="fountainTextG">s</div>
</div>

Related

Why am I getting 2 slid shows on web page?

I recently added a slide show as a background on my webpage. I took the code from a tutorial and added my information. After I did the css and took a look at the page I had 2 slideshows. One that covered the entire page (what I wanted) and another behind my sites header. I thought it might be because I had everything in a background container but when I took that away the second slide show just appeared over my header. I can't figure out how to get rid of the second slide show.
Her is my code for the slide show:
<div id="background-container">
<ul class="cb-slideshow">
<li>
<span>Image 01</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_10.jpg" style="width:100%">
<h3>Class</h3>
</div>
</li>
<li>
<span>Image 02</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_1.jpg" style="width:100%">
<h3>Rosary</h3>
</div>
</li>
<li>
<span>Image 03</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_2.jpg" style="width:100%">
<h3>Sets</h3>
</div>
</li>
<li>
<span>Image 04</span>
<div>
<img class="sh_pic" src="pictures/gallary/image_3.jpg" style="width:100%">
<h3>Bracelets</h3>
</div>
</li>
<li>
<span>Image 05</span>
<div>
<img class="sh_pic" src="pictures/gallary/PB0002.jpg" style="width:100%">
<h3>Sophistication</h3>
</div>
</li>
<li>
<span>Image 06</span>
<div>
<img class="sh_pic" src="pictures/gallary/necklace-1.jpg" style="width:100%">
<h3>Necklace</h3>
</div>
</li>
</ul>
</div>
And here is the css:
#background-container {
position: fixed;
z-index: -1000;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(pictures/gallary/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 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: 10px;
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: brock;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: black;
}
.cb-slideshow li:nth-child(1) span { background-image: url(pictures/gallary/necklace-1.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(pictures/gallary/PB0002.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(pictures/gallary/image_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(pictures/gallary/image_2.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(pictures/gallary/image_1.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(pictures/gallary/image_10.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(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 }
Maybe there is to much code and I just don't see it.
Any ideas how to get rid of the second one?

Creating a new section under css effects

Hi guys so i am playing around with this tutorial right now Link
And i created my backgrounds which work fine etc, now i want to add my new section right under that section but for some reason no section is appearing below it, its appearing above it, and i have no idea why :
HTML:
<ul class="cb-slideshow">
<li><span>Image 01</span>
<div></div>
</li>
<li><span>Image 02</span>
<div></div>
</li>
<li><span>Image 03</span>
<div></div>
</li>
<li><span>Image 04</span>
<div></div>
</li>
<li><span>Image 05</span>
<div></div>
</li>
<li><span>Image 06</span>
<div></div>
</li>
</ul>
<div class="aboutus">
<div class="container">
<h1>ABOUT US</h1>
</div>
</div>
CSS:
.aboutus {
height: 500px;
background-color: blue;
}
Style Sheet From tutorial :
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 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: 10px;
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);
}
.cb-slideshow li:nth-child(1) span { background-image: url(../images/6.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/5.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/4.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/3.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/2.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/1.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(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 }
}
So everything is working perfectly right now, i got the backtround images to load and the animations look beautiful etc, but i want to start my new section about us right under slideshow but for some reason its appearing ontop of it and its dispersing all the time is well and i have no clue why. I am also using bootstrap 3 with this demo page
Thanks

Remove display: fixed; from .cb-slideshow class. Because fixed section always viewed on top and other elements start above or below this section.
Here is the css properties which I changed in .cb-slideshow class:
.cb-slideshow,
.cb-slideshow:after {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
}
body, ul {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
ul {
list-style:none;
}
body{
background: #000;
font-weight: 400;
font-size: 15px;
color: #aa3e03;
overflow-y: scroll;
overflow-x: hidden;
}
h1 {
margin: 0
}
.container{
position: relative;
text-align: center;
}
.aboutus {
height: 500px;
background-color: blue;
padding-top: 20px;
color: #fff;
}
.cb-slideshow,
.cb-slideshow:after {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 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 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: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url('https://image.ibb.co/bFH276/1.jpg')
}
.cb-slideshow li:nth-child(2) span {
background-image: url('https://image.ibb.co/kHoELR/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('https://image.ibb.co/g7xVum/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('https://image.ibb.co/d81OEm/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('https://image.ibb.co/ejben6/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('https://image.ibb.co/gahKn6/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(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;
}
/* 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 }
}
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>
<div class="aboutus">
<div class="container">
<h1> ABOUT US </h1>
</div>
</div>
</body>
UPDATE
I changed in .cb-slideshow class
.cb-slideshow,
.cb-slideshow:after{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
overflow: hidden;
}
body, ul {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
ul {
list-style:none;
}
body{
background: #000;
font-weight: 400;
font-size: 15px;
color: #aa3e03;
overflow-y: scroll;
overflow-x: hidden;
}
h1 {
margin: 0
}
.container{
position: relative;
text-align: center;
}
.aboutus {
height: 500px;
background-color: blue;
padding-top: 20px;
color: #fff;
}
.cb-slideshow,
.cb-slideshow:after {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
height: 662px;
display: block;
position: relative;
overflow: hidden;
}
.cb-slideshow:after {
content: '';
background: transparent url('https://image.ibb.co/d4Ls76/pattern.png') repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 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: 10px;
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);
}
.cb-slideshow li:nth-child(1) span {
background-image: url('https://image.ibb.co/gahKn6/6.jpg')
}
.cb-slideshow li:nth-child(2) span {
background-image: url('https://image.ibb.co/ejben6/5.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('https://image.ibb.co/d81OEm/4.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('https://image.ibb.co/g7xVum/3.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('https://image.ibb.co/kHoELR/2.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('https://image.ibb.co/bFH276/1.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(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 }
}
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js' type='text/javascript'></script>
</head>
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>se·ren·i·ty</h3></div></li>
<li><span>Image 02</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 03</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 04</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 05</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 06</span><div><h3>re·lax·a·tion</h3></div></li>
</ul>
<div class="aboutus">
<div class="container">
<h1> ABOUT US </h1>
</div>
</div>
</body>

This might resolve the issue:
.aboutus {
clear:both;
display:block
}

Prevent last css animation from hiding

I have a CSS animation I found online to loop through a website headline, but at the moment, when the last headline appears, it also hides, meaning there is no headline visible at the end.
What I've spent the last hour trying to work out, is how can I have the css animation work like I do right now, except when the last headline appears, instead of sliding out and hiding, it just stays there...
Here is what I have:
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
}
.rw-words-1 span {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
animation-delay: 7.5s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>

try it i thinks it help full
.rw-sentence {
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}
.rw-sentence span {
font-size: 200%;
font-weight: normal;
}
.rw-words {
display: inline;
}
.rw-words-1 span:last-child {
-webkit-animation: rotateend 8s 1 forwards 6s;
-ms-animation: rotateend 8s 1 forwards 6s;
animation: rotateend 8s 1 forwards 6s;
}
#keyframes rotateend {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {opacity: 1}
}
.rw-words-1 span {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: forwards;
}
.rw-words-1 span:nth-child(6) {
-webkit-animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
animation-delay: 7.5s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#media screen and (max-width: 768px) {
.rw-sentence {
font-size: 18px;
}
}
#media screen and (max-width: 320px) {
.rw-sentence {
font-size: 9px;
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>
i have add some css

You can create a new animation for the last span in the container like this:
.rw-words-1 span:not(:last-child) {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:last-child {
position: absolute;
-webkit-animation: showWord 8s linear;
-ms-animation: showWord 8s linear;
animation: showWord 8s linear;
}
and the keyframe animation something like this:
#keyframes showWord {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
95% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
See a demo below - I guess you can take it forward from this point:
.rw-words {
display: inline;
}
.rw-words-1 span:not(:last-child) {
position: absolute;
opacity: 0;
-webkit-animation: rotateWord 7.5s linear;
-ms-animation: rotateWord 7.5s linear;
animation: rotateWord 7.5s linear;
}
.rw-words-1 span:last-child {
position: absolute;
-webkit-animation: showWord 8s linear;
-ms-animation: showWord 8s linear;
animation: showWord 8s linear;
}
.rw-words-1 span:nth-child(2) {
-webkit-animation-delay: 1.5s;
-ms-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.rw-words-1 span:nth-child(3) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words-1 span:nth-child(4) {
-webkit-animation-delay: 4.5s;
-ms-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.rw-words-1 span:nth-child(5) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#-webkit-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes rotateWord {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes showWord {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
95% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<span class="h2 homeTitle rw-words rw-words-1">
<span>First headline.</span>
<span>Second headline.</span>
<span>Third headline.</span>
<span>Fourth headline.</span>
<span>Fifth headline.</span>
<span>My final headline...</span>
</span>

Css loop animation

I have a problem with the animation, where the words should iterate 'n' number of times
The above mentioned code has 9 different words which has a fade in and out animation one after the other, but this animation is only once . What i need is the loop iterates again and again with the same animation , as the last word ends the first should be loaded.
Here is the html/css code:
h1.main,p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 90px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-6 {
-webkit-animation-delay:0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-1 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-2 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-3 {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-container h2.frame-7 {
font-size: 200px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
.sp-container h2.frame-8 {
font-size: 200px;
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container h2.frame-9 {
font-size: 200px;
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
}
.sp-container h2.frame-5 {
font-size: 200px;
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
/* .sp-container h2.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
} */
.sp-container h2.frame-5 span:nth-child(2) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack{
0%{
opacity: 0;
-webkit-transform: scale(0);
}
50%{
opacity: 0.4;
-webkit-transform: scale(2);
}
100%{
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate{
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack{
0%{
opacity: 0;
-moz-transform: scale(0);
}
50%{
opacity: 0.4;
-moz-transform: scale(2);
}
100%{
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate{
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn{
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack{
0%{
opacity: 0;
transform: scale(0);
}
50%{
opacity: 0.4;
transform: scale(2);
}
100%{
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate{
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
<div class="container">
<div class="header">
<div class="clr"></div>
</div>
<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 style="font-size:75px;font-family:bold;" class="frame-6"><span>WE </span> <span>STAND </span> <span>FOR</span></h2>
<h2 style="font-size:68px;" class="frame-1">INNOVATION</h2>
<h2 style="font-size:68px;" class="frame-2">QUALITY</h2>
<h2 style="font-size:68px;" class="frame-3">RELIABILITY</h2>
<h2 style="font-size:68px;" class="frame-4">SAFETY</h2>
<h2 style="font-size:68px;" class="frame-7">VALUES</h2>
<h2 style="font-size:68px;" class="frame-8">HARMONY</h2>
<h2 style="font-size:68px;" class="frame-9">UNITY</h2>
<h2 style="font-size:75px;font-family:bold;" class="frame-5"><span>CUSTOMER</span> </h2>
</div>
</div>
</div>

I don't really understand your code, but what you can do is to create an animation for each element and define the same duration for each element of the animation (the total animation time).
After that, you just have to handle "what is displayed when" using %
In my example, I will handle 4 elements, so 25% of the total time for each one (and +/-5% for fadeIn fadeOut)
.el-1, .el-2, .el-3, .el-4 {
position: absolute;
width: 100px;
height: 100px;
animation-duration: 10s; /* Total time */
animation-iteration-count: infinite;
animation-delay: 0; /* by default */
}
.el-1 {
animation-name: example-1;
background: red;
}
.el-2 {
animation-name: example-2;
background: green;
}
.el-3 {
animation-name: example-3;
background: blue;
}
.el-4 {
animation-name: example-4;
background: yellow;
}
#keyframes example-1 {
0% {opacity: 0;}
5% {opacity: 1;}
20% {opacity: 1;}
30% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes example-2 {
0% {opacity: 0;}
20% {opacity: 0;}
30% {opacity: 1;}
40% {opacity: 1;}
60% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes example-3 {
0% {opacity: 0;}
40% {opacity: 0;}
60% {opacity: 1;}
70% {opacity: 1;}
80% {opacity: 0;}
100% {opacity: 0;}
}
#keyframes example-4 {
0% {opacity: 0;}
70% {opacity: 0;}
80% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
<div class="el-1">1</div>
<div class="el-2">2</div>
<div class="el-3">3</div>
<div class="el-4">4</div>

CSS3 Slider with more than 6 images

I am using a nice CSS3 slider for a slideshow in our canteen. The slider is awesome but it has a bug and the developer seems to be no longer active.
If you add more than 6 items to the slideshow it overlaps and I can't find the issue. Anybody has any ideas?
Here's the fiddle
<body id="page">
<ul class="cb-slideshow">
<ul>
<!-- Background Images muessen via CSS gesetzt werden! -->
<li><span>Image 01</span><div class="slide">{{SP7}}</div></li>
<li><span>Image 02</span><div class="slide">{{SP2}}</div></li>
<li><span>Image 08</span><div class="slide">{{SP10}}</div></li>
<li><span>Image 04</span><div class="slide">{{SP4}}</div></li>
<li><span>Image 05</span><div class="slide">{{SP8}}</div></li>
<li><span>Image 06</span><div class="slide">{{SP6}}</div></li>
</ul>
</ul>
</body>
I reduced the CSS to a minimum. The Source is from here.
For Example, if I try with 9 elements I try these timings but it overlaps:
.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 180s linear infinite 0s;
-moz-animation: imageAnimation 180s linear infinite 0s;
-o-animation: imageAnimation 180s linear infinite 0s;
-ms-animation: imageAnimation 180s linear infinite 0s;
animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 40px;
right:5px;
width: 90%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 180s linear infinite 0s;
-moz-animation: titleAnimation 180s linear infinite 0s;
-o-animation: titleAnimation 180s linear infinite 0s;
-ms-animation: titleAnimation 180s linear infinite 0s;
animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
right:5px;
margin:25px;
font-size:80px;
color: #E2001A;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
right:5px;
margin:25px;
font-size:80px;
color: #FFFFFF;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span { background-image: url(assets/images/background/em.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(assets/images/background/xmas.jpg);
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(assets/images/background/nextgen.jpg);
-webkit-animation-delay: 80s;
-moz-animation-delay: 80s;
-o-animation-delay: 80s;
-ms-animation-delay: 80s;
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(assets/images/background/borussia.jpg);
-webkit-animation-delay: 100s;
-moz-animation-delay: 100s;
-o-animation-delay: 100s;
-ms-animation-delay: 100s;
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
-webkit-animation-delay: 120s;
-moz-animation-delay: 120s;
-o-animation-delay: 120s;
-ms-animation-delay: 120s;
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(assets/images/background/f1.jpg);
-webkit-animation-delay: 140s;
-moz-animation-delay: 140s;
-o-animation-delay: 140s;
-ms-animation-delay: 140s;
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(assets/images/background/superbowl.jpg);
-webkit-animation-delay: 160s;
-moz-animation-delay: 160s;
-o-animation-delay: 160s;
-ms-animation-delay: 160s;
animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
-o-animation-delay: 20s;
-ms-animation-delay: 20s;
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 40s;
-moz-animation-delay: 40s;
-o-animation-delay: 40s;
-ms-animation-delay: 40s;
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 60s;
-moz-animation-delay: 60s;
-o-animation-delay: 60s;
-ms-animation-delay: 60s;
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 80s;
-moz-animation-delay: 80s;
-o-animation-delay: 80s;
-ms-animation-delay: 80s;
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 100s;
-moz-animation-delay: 100s;
-o-animation-delay: 100s;
-ms-animation-delay: 100s;
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
-webkit-animation-delay: 120s;
-moz-animation-delay: 120s;
-o-animation-delay: 120s;
-ms-animation-delay: 120s;
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
-webkit-animation-delay: 140s;
-moz-animation-delay: 140s;
-o-animation-delay: 140s;
-ms-animation-delay: 140s;
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
-webkit-animation-delay: 160s;
-moz-animation-delay: 160s;
-o-animation-delay: 160s;
-ms-animation-delay: 160s;
animation-delay: 160s;
}

The answer to your question is already present in the link that you'd provided in the question but I will try to explain it differently just in case you had problems understanding that.
Changing just animation-duration, animation-delay alone are not sufficient to make this animation work with more no. of elements. You'd have to modify the animation keyframe setting also like in the snippet provided below.
#keyframes imageAnimation {
0% {opacity: 0; animation-timing-function: ease-in;}
5% {opacity: 1; transform: scale(1.05); animation-timing-function: ease-out;}
11% {opacity: 1; transform: scale(1.1) rotate(3deg);}
16% {opacity: 0; transform: scale(1.1) rotate(3deg);}
100% {opacity: 0;}
}
#keyframes titleAnimation {
0% {opacity: 0; transform: translateX(200px);}
5% {opacity: 1; transform: translateX(0px);}
11% {opacity: 1; transform: translateX(0px);}
13% {opacity: 0; transform: translateX(-400px);}
25% {opacity: 0;}
100% {opacity: 0;}
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(assets/images/background/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
backface-visibility: hidden;
animation: imageAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 40px;
right: 5px;
width: 90%;
text-align: center;
opacity: 0;
animation: titleAnimation 180s linear infinite 0s;
}
.cb-slideshow li div {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide {
font-family: 'Roboto Condensed', sans-serif;
font-size: 60px;
padding: 10px 10px;
margin: 20px;
line-height: 60px;
color: #ffffff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h1 {
right: 5px;
margin: 25px;
font-size: 80px;
color: #E2001A;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.slide h2 {
right: 5px;
margin: 25px;
font-size: 80px;
color: #FFFFFF;
font-family: 'Bree Serif', serif;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
}
.cb-slideshow li:nth-child(1) span {
background-image: url(assets/images/background/em.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(assets/images/background/Madden-NFL-15-Game-HD-Wallpaper.jpg);
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(assets/images/background/xmas.jpg);
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(assets/images/background/Brees-Wallpaper-2560x1440.jpg);
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(assets/images/background/nextgen.jpg);
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(assets/images/background/borussia.jpg);
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) span {
background-image: url(assets/images/background/19757-football-stadium-1920x1200-sport-wallpaper.jpg);
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) span {
background-image: url(assets/images/background/f1.jpg);
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) span {
background-image: url(assets/images/background/superbowl.jpg);
animation-delay: 160s;
}
.cb-slideshow li:nth-child(2) div {
animation-delay: 20s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 40s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 60s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 80s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 100s;
}
.cb-slideshow li:nth-child(7) div {
animation-delay: 120s;
}
.cb-slideshow li:nth-child(8) div {
animation-delay: 140s;
}
.cb-slideshow li:nth-child(9) div {
animation-delay: 160s;
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
5% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
11% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
16% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% {
opacity: 0
}
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
5% {
opacity: 1;
transform: translateX(0px);
}
11% {
opacity: 1;
transform: translateX(0px);
}
13% {
opacity: 0;
transform: translateX(-400px);
}
25% {
opacity: 0
}
100% {
opacity: 0
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul class="cb-slideshow">
<ul>
<li><span>Image 01</span>
<div class="slide">{{SP1}}</div>
</li>
<li><span>Image 02</span>
<div class="slide">{{SP2}}</div>
</li>
<li><span>Image 03</span>
<div class="slide">{{SP3}}</div>
</li>
<li><span>Image 04</span>
<div class="slide">{{SP4}}</div>
</li>
<li><span>Image 05</span>
<div class="slide">{{SP5}}</div>
</li>
<li><span>Image 06</span>
<div class="slide">{{SP6}}</div>
</li>
<li><span>Image 07</span>
<div class="slide">{{SP7}}</div>
</li>
<li><span>Image 08</span>
<div class="slide">{{SP8}}</div>
</li>
<li><span>Image 09</span>
<div class="slide">{{SP9}}</div>
</li>
</ul>
</ul>
The following are key for infinite loop animations with multiple elements to work without overlapping:
The animation-duration on each element should be equal to the sum total of time required for all elements to complete their animation. For nine elements to animate (fade in, stay visible, fade out cycle) for 20s each the animation-duration on each element should be 9*20s = 180s.
Each element should animate only for that 20s duration, for the rest of the time they should stay idle in-order for them to not overlap with the previous or the next element. This can be achieved using the following two settings.
First is to make each element start their animation only after all the previous elements have completed their own animation. So, the first element would have no delay, the second would have delay of 20s (amount of time for 1st element's animation), the third would have a of 40s (time take for first two elements' animation) and so on for the subsequent elements.
Second is to make the elements remain idle for the remaining 160s (total animation duration - animation time for each element). This is needed because during that time the other elements are doing their animation.This is achieved by modifying the keyframe settings such that the amount of time taken for each element to fade-in and stay visible is roughly equal to the total animation duration divided by total no. of elements (which is nothing but 1/9th of 100%).
In the original animation you'd provided in question (for 6 elements), each element went from opacity: 0 at 0% to opacity: 1 at 8% and stayed as-is till 16% (which is 1/6th of 100%). Here, since you have 9 elements, the fade-out should start at 11% (which is roughly 1/9th of 100%). So, we change the keyframe settings to make the elements go from opacity: 0 at 0% to opacity: 1 at 5% and then stay with opacity: 1 till 11%. After that is slowly starts fading out till it reaches the 16% mark.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

How to set my site loader in middle of screen - html

Related

Why am I getting 2 slid shows on web page?

Creating a new section under css effects

Prevent last css animation from hiding

Css loop animation

CSS3 Slider with more than 6 images

Categories

Resources