.container{ /*set the margin of 200px*/ margin: 200px; /*give a paading-left 70px*/ padding-left: 70px; } .inner-container { /*set float to left*/ float:left; /*give a margin of 100px*/ margin:100px; /*set a width of 1000px*/ width: 1000px; } /*.load > div means we want to select only the div that sits directly after the load container. This will not take any child element present in the inner div */ .load > div{ /*give a font-size of 20px*/ font-size: 20px; /*Add a line-height of 90px. It will shift the element downwards.*/ line-height: 90px; /*It will shift the element to the center*/ text-align: center; /*set the background colour to white*/ background-color: white; /*set the float property to left which will float elements from left to right*/ float: left; /*set the margin-left property to 150px, it will shift the elements 150px from the left*/ margin-left: 150px; /*set the width to 20px for each elements*/ width: 20px; /*set the opacity to 1 which is nothing but the visiblity level*/ opacity: 1.0; /*Set the transform scale to 0.8 that will reduce the font-scale of the elements*/ -webkit-transform: scale(0.8); /*this "load" is a keyframe that we want to bind to a selector*/ -webkit-animation-name: load; /*animation duration*/ -webkit-animation-duration: 1.20s; /*set the interation to infinite, if you want the animation non-stop*/ -webkit-animation-iteration-count: infinite; } /* keyframes - load. Where load is the animation name*/ @-webkit-keyframes load { /* 0% means the starting. scale the element to 1.2 and set the opactiy to 1 which will display the elements clearly*/ 0% { -webkit-transform: scale(1.2); opacity: 1; } 100% { -webkit-transform: scale(0.7); opacity: 0.1; } } /*.load > div:nth-child(1) means the first div element. For each element give a delay of 0.24seconds*/ .load > div:nth-child(1) { -webkit-animation-delay: 0.24s; } .load > div:nth-child(2) { -webkit-animation-delay: 0.48s; } .load > div:nth-child(3) { -webkit-animation-delay: 0.72s; } .load > div:nth-child(4) { -webkit-animation-delay: 0.96s; } .load > div:nth-child(5) { -webkit-animation-delay: 1.20s; } Welcome to Zellerfilms.com
loading
loading
loading
loading
loading