Hello folks,

CSS3 is indeed a darling technology that has made life of web designers a lot easier. Anyone, even young designers can find the influence of the CSS3 in daily life, as it has reduced the time required to get a site up and running.

Also now JS is used primarily in functional fronts rather than animation, because CSS3 has taken that responsibility and that, actually is a good sign.

Demo:

[codegroup]
[html]

[/html]
[css]
.flikr_loader {
animation: flikr_loader_keyframes infinite 700ms linear alternate ;
width: 50px;
height: 50px;
height: 50px;
background-color: red;
color: #fff;
position: absolute;
text-align: center;
display: block;
vertical-align: middle;
border-radius: 50px;
}

.relative_div {
height: 120px;
margin: 200px auto;
position: relative;
width: 120px;
}

.relative_div:after {
bottom: -89px;
color: #A4A3A3;
content: “Loading…”;
font-family: arial;
font-size: 30px;
left: 6px;
position: absolute;
text-align: center;
}

.loader_instance_1 {

animation-delay: 0ms;
background-color: #006ADD;
}

.loader_instance_2 {

animation-delay: 700ms;
background-color: #FF1981;
}

@keyframes flikr_loader_keyframes {

0% {
left: 0px;
}

100% {
left: 80px;
}

}
[/css]
[/codegroup]