I'm trying to animate the second part of the sentence to change words. div box is the non-changing part, and div word is the changing part. Even though in every guide I've read, it says defining position as absolute and hiding overflow will fix the starting position of second part of the sentence, it still keeps changing. Here's my CSS:
body
{
margin: 0;
padding: 0;
background: #B4B8AB;
}
.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-family: arial;
color: #fff;
margin-left: 150px;
width: calc(100% - 50px)
text-shadow: 0 2px 2px rgba(0,0,0,.5);
}
.word
{
display: inline-block;
color: #e65c00;
}
.word span
{
position: aboslute;
top: 0;
overflow: hidden;
animation: animate 12s linear infinite 0s;
opacity: 0;
}
#keyframes animate
{
0%
{
opacity: 0;
transform: translateY(-50px);
}
2%
{
opacity: 1;
transform: translateY(0px);
}
15%
{
opacity: 1;
transform: translateY(0px);
}
20%
{
opacity: 0;
transform: translateY(50px);
}
80%
{
opacity: 0;
transform: translateY(50px);
}
100%
{
opacity: 0;
transform: translateY(50px);
}
}
.word span:nth-child(1)
{
animation-delay: 0s;
}
.word span:nth-child(2)
{
animation-delay: 2s;
}
.word span:nth-child(3)
{
animation-delay: 4s;
}
.word span:nth-child(4)
{
animation-delay: 6s;
}
.word span:nth-child(5)
{
animation-delay: 8s;
}
.word span:nth-child(6)
{
animation-delay: 10s;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tickets</title>
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<div id="menu">
<div class="logo">
<nav>
<img src="../images/mylogo.png" height="30" width="156" />
</nav>
</div>
</div>
<div class="box">
Sick of
<div class="word">
<span>wasting your time and money?</span>
<span>unreliable Ubers?</span>
<span>being stuck in traffic?</span>
<span>waiting in line?</span>
<span>sold out tickets?</span>
<span>logistical nightmares?</span>
</div>
</div>
</body>
</html>
Found the error on line 26 in the CSS
position: aboslute;
Change it to absolute and you are good to go ;)
Fiddle example here
Also, very cool effect!
New request
Figured it out. There was a missing ;
.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
font-family: arial;
color: #fff;
margin-left: 150px;
width: calc(100% - 50px); /* <--- Right here */
text-shadow: 0px 2px 2px rgba(0,0,0,.5);
}
New Fiddle example here
Related
as a newbie in CSS animations i'm trying to make some spinners,
Unfortunately i am not able to make repeat a cycle of animations and i'm searching help!
Here is the code:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
I even tried with infinite attribute but obviously it continues to repeat every block:
.rotate {
transform: rotate(-45deg);
display: flex;
}
#column {
display: flex;
flex-direction: column;
}
.block3 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 0s;
}
.block4 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .4s;
}
.block2 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: .8s;
}
.block1 {
width: 45px;
height: 45px;
background-color: black;
margin: 1px;
animation: fade .4s infinite linear both;
animation-delay: 1.2s;
}
#keyframes fade {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
100% {
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<style>
body {
position: absolute;
margin: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.margin {
margin-top: 200px;
left: 50%;
transform: translate(-50%);
position: absolute;
}
</style>
</head>
<body>
<section class="animation rotate">
<div id="column">
<div class="block1"></div>
<div class="block2"></div>
</div>
<div id="column">
<div class="block3"></div>
<div class="block4"></div>
</div>
</section>
</body>
</html>
So in conclusion:
block1 executes, block2 executes, block3 executes, block4 executes then repeat from block1
You will need to create a keyframe for each block:
.rotate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg) ;
display: flex;
flex-wrap: wrap;
width: 100px; /* change this to control the size */
}
.rotate div {
flex:1 1 48%; /* little less than 50% to consider the margin */
margin: 1px;
background-color: black;
animation: 2s linear infinite;
}
/* maintain square ratio*/
.rotate div::before {
content: "";
display: block;
padding-top: 100%;
}
/**/
.rotate div:nth-child(1) { animation-name:fade4}
.rotate div:nth-child(2) { animation-name:fade1}
.rotate div:nth-child(3) { animation-name:fade3}
.rotate div:nth-child(4) { animation-name:fade2}
/* [0% first one 20%][20% second one 40%][40% third one 60%][60% fourth one 80%][80% pause 100%] */
#keyframes fade1 {
0% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
20%,100% {
opacity: 0;
}
}
#keyframes fade2 {
0%,20% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
40%,100% {
opacity: 0;
}
}
#keyframes fade3 {
0%,40% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
60%,100% {
opacity: 0;
}
}
#keyframes fade4 {
0%,60% {
opacity: 1;
transform: perspective(140px) rotateX(-180deg);
}
80%,100% {
opacity: 0;
}
}
<section class="animation rotate">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
I am using this radio button effect - https://codepen.io/tomma5o/pen/grJyzL/ which works OK, but now I ran into problem where a few of my options are longer text and it goes over bottom option (because there is 30px height on li).
Here is example - https://codepen.io/BrixyX/pen/OJMwjrN. Is there any easy fix for this, because whatever I try, I mess up the effect?
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
::selection {
background: none;
}
body {
background: #BADA55;
font-family: 'Roboto';
font-weight: 500;
text-transform: uppercase;
color: #2E8612;
overflow: hidden;
height: 100%;
}
h1 {
font-weight: 100;
text-align: center;
margin: 0;
padding: 0;
font-size: 50px;
}
h4 {
font-weight: 400;
text-align: center;
margin: 0;
padding: 0;
margin-bottom: 50px;
}
.continput {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 500px;
height: 270px;
padding: 16px;
box-sizing: border-box;
}
ul {
list-style-type: none;
width: 220px;
margin: auto;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height: 30px;
}
label:before {
content: "";
width: 15px;
height: 15px;
background: #fff;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked~.bullet {
position: absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #fff;
opacity: 0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked~.bullet .line.zero {
animation-name: drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.one {
animation-name: drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.two {
animation-name: drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.three {
animation-name: drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.four {
animation-name: drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.five {
animation-name: drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.six {
animation-name: drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.seven {
animation-name: drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0% {
opacity: 0;
transform: scale(10);
}
60% {
opacity: 1;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity: 0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity: 0;
}
}
<div class="continput">
<h1>Jelly Radio btn</h1>
<h4>I hope you enjoyed it</h4>
<ul>
<li>
<input checked type="radio" name="1">
<label>OMG a radio! Longer option text Longer option text Longer option text Longer option text Longer option text Longer option text Longer option text Longer option ...</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
<li>
<input type="radio" name="1">
<label>Uuuuh radio</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
<li>
<input type="radio" name="1">
<label>radio everywhere</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
</ul>
</div>
I have cleaned up a few things and created a new fiddle from your pen here.
Firstly, I've tried removing the absolute positioning being used in a lot of places.
I've also made use of the feature that the label element provides which is interaction with the input elements.
I've moved your radio elements inside the label and have also moved the bullet animation accordingly.
Overall, the label element is now being used as a wrapper for all your elements inside of it, and hence those elements would align themselves based on the size of their parent.
P.S., since I tried to wrap this up quickly, I've center-aligned the bullet inside your label using the translate(-50%) hack. There are other cleaner ways of doing this but this one was just a quicker way for now.
There are several ways available to fix the issue of long option texts covering the rest of the options.
The first option is to change the width of the continput class to a higher value so that more text can fit inside of the labels. The labels are being constrained by the margin and padding enabled by the list and list items the radio buttons are put inside of. Hence a wider width will mean that more option text can be neatly displayed.
The second option is to set the overflow property of the list items to hidden, like this (new property at the bottom of the definition):
li {
position: relative;
padding: 10px;
padding-left: 40px;
height: 30px;
overflow: hidden;
}
This way, text that cannot be displayed without overflowing from the list items will be hidden and not cover text belonging to radio buttons further down. There are also more options for the overflow setting; the Mozilla MDN web docs has a short article on the property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
The third option is a combination of these options above. This should result in something that looks and works in a way that suits your needs. If you haven't started inspecting and experimenting with your own content using something like Google Chrome's Inspect function yet, I recommend you to read a tutorial for the browser you are using. Zapier has an in-depth tutorial for Google Chrome here and I see that Microsoft have incorporated the same tools that are available in Google Chrome into their updated Microsoft Edge (with the blue and green logo).
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>
What can I do to avoid the image blurry/flickering issue when using CSS transform? I've tried a bunch of suggestions from CSS transition effect makes image blurry / moves image 1px, in Chrome?, but cannot seem to figure it out.
I've attached the plunker code below.
https://plnkr.co/edit/kXbrxjnD0llt3u8dBujv?p=preview
index.html
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<img src="usequities_green.svg" class="sample_fixed_income">
<section class="sectors">
<div class="container index-container-responsive">
<div class="row">
<div class="sectors-icon">
<img src="usequities_green.svg" class="sectors-icon-container fixed_income">
</div>
</div>
</div>
</section> </body>
</html>
style.css
/* Styles go here */
.sectors {
background-color: #30B784;
color: white;
display: flex;
height: 680px;
align-items: center;
justify-content: center;
position: relative;
}
.sectors__section__title {
font-size: 32px;
line-height: 48px;
}
.sectors-icon .sectors-icon-container{
animation-direction: alternate;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: white;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
box-shadow: 0 10px 40px 0 rgba(23, 28, 33, 0.13), 0 31px 13px 0 rgba(23, 28, 33, 0.05);
opacity: 1;
transition: margin 0s cubic-bezier(0.2,0.6,0.3,1), opacity 0s ease;
}
#keyframes floating_fixed_income {
0% {
transform: translate(0%,0%);
}
12.5% {
transform: translate(-2%,1%);
}
25% {
transform: translate(-4%,2%);
}
50% {
transform: translate(-2%,3%);
}
62.5% {
transform: translate(0%,2%);
}
75% {
transform: translate(1%,1%);
}
100% {
transform: translate(2%,0%);
}
}
.sectors-icon-container.fixed_income {
animation-name: floating_fixed_income;
animation-duration: 5s;
height: 112px;
background-size: 112%;
width: 112px;
margin-left: 73%;
margin-top: -11%;
}
I think it's a bug. Not as neat but my recommendation is to just go with animating an absolutely positioned element for now. You can position your sectors-icon where you want it, give it relative positioning and then add the hovering animation to it's child img with absolute positioning:
#keyframes floating_fixed_income {
0% {
top: 0;
}
12.5% {
top: 20px;
}
25% {
top: 10px;
}
50% {
top: 100px;
}
62.5% {
top: 50px;
}
75% {
top: 20px;
}
100% {
top: 0;
}
}
https://plnkr.co/edit/YHIeL9vO2nQpTaoBpup3?p=preview
So, I have this CSS pre-loader working. However, I'm having some difficulty adding this to my site. Could someone help me to understand the implementation of the code to allow for the pre-loader to be the first item viewed until the site is loaded. At which point the pre-loader will fade out. The code for the the pre-loader is as follows :
<div class = "container">
<div id="css-preloader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
/* CSS */
#.container {
width: 100%;
}
#css-preloader{
position:relative;
width: 100%;
margin: 10% 0 0 45%;
}
#css-preloader span{
display: block;
bottom: 0px;
width: 5px;
height: 10px;
background: #e43632;
position: absolute;
animation: preloader_1 2.25s infinite ease-in-out;
}
#css-preloader span:nth-child(2){
left: 11px;
animation-delay: .2s;
}
#css-preloader span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#css-preloader span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#css-preloader span:nth-child(5){
left:44px;
animation-delay: .8s;
}
#css-preloader span:nth-child(6){
left: 55px;
animation-delay: 1s;
}
#css-preloader span:nth-child(7){
left: 66px;
animation-delay: 1.2s;
}
#css-preloader span:nth-child(8){
left: 77px;
animation-delay: 1.4s;
}
### #css-preloader span:nth-child(9){
left: 88px;
animation-delay: 1.6s;
}
#keyframes preloader_1 {
###0% {
height: 10px;
transform: translateY(0px);
background: #fdcf01;
}
25% {
height: 60px;
transform: translateY(15px);
background: #4bb846;
}
50% {
height: 10px;
transform: translateY(-10px);
background:#2988dd;
}
100% {
height: 10px;
transform: translateY(0px);
background: #e43632;
}
}
Please do not us IDs for the styling purposes https://github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors
Do not name your CSS classes .css-preloader try to be more general. Something that is defined in CSS must be CSS so no need for the prefix.
Good pointers #osmanraifgunes but we are living in 2016 so no need jQuery for this simple task. Simple usage of window.onload combined with document.querySelector will do the trick. Also $(document).ready is fired once DOM is fully loaded not all the resources on the page. For that we need to use window.onload in plain JS or $(window).load in jQuery...
Instead of using jQuery hide(), you can just add CSS class .hidden to the preloader once the content is fully loaded... This approach provides you with a possibilities of using CSS3 animations.
I modified your code a bit and added the JS logic, here is the demo:
window.onload = function() {
addCls('.preloader', 'hidden');
}
function addCls(selector, cls) {
var element = document.querySelector(selector);
element.classList.add(cls);
}
.container {
position: relative;
width: 100%;
}
.container img {
width: 100%;
}
.holder {
position: absolute;
top: 50%;
left: 50%;
width: 93px;
height: 10px;
margin: -5px 0px 0px -46px;
}
.preloader {
position: fixed;
background-color: #ffffff;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
transition: all 1.5s ease;
}
.preloader.hidden {
top: -150%;
opacity: 0;
}
.preloader span {
display: block;
width: 5px;
height: 10px;
background: #e43632;
position: absolute;
animation: preloader-animation 2.25s infinite ease-in-out;
}
.preloader span:nth-child(2) {
left: 11px;
animation-delay: .2s;
}
.preloader span:nth-child(3) {
left: 22px;
animation-delay: .4s;
}
.preloader span:nth-child(4) {
left: 33px;
animation-delay: .6s;
}
.preloader span:nth-child(5) {
left: 44px;
animation-delay: .8s;
}
.preloader span:nth-child(6) {
left: 55px;
animation-delay: 1s;
}
.preloader span:nth-child(7) {
left: 66px;
animation-delay: 1.2s;
}
.preloader span:nth-child(8) {
left: 77px;
animation-delay: 1.4s;
}
.preloader span:nth-child(9) {
left: 88px;
animation-delay: 1.6s;
}
#keyframes preloader-animation {
0% {
height: 10px;
transform: translateY(0px);
background: #fdcf01;
}
25% {
height: 60px;
transform: translateY(15px);
background: #4bb846;
}
50% {
height: 10px;
transform: translateY(-10px);
background: #2988dd;
}
100% {
height: 10px;
transform: translateY(0px);
background: #e43632;
}
}
<div class="container">
<img src="https://static.pexels.com/photos/64609/pexels-photo-64609.jpeg" />
<img src="https://static.pexels.com/photos/8139/pexels-photo.jpg" />
<img src="https://static.pexels.com/photos/10979/pexels-photo-10979.jpeg" />
<img src="https://static.pexels.com/photos/24326/pexels-photo-24326.jpg" />
<div class="preloader">
<div class="holder">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
Set z-index of your loader 99 (should be biggest z-indexed element inside page).
z-index:99;
Then
$(document).ready(function(){
$('.classOfTheLoader').hide();
});
Note that jquery is needed.