CSS3 animation effects

<div class= "Boxmove" >
<div class= "Rect con-1" ></div>
<div class= "Rect con-2" ></div>
<div class= "Rect con-3" ></div>
<div class= "Rect con-4" ></div>
<div class= "Rect con-5" ></div>
</div>
<div class= "Music" >
<div class= "One" ></div>
<div class= "both" ></div>
<div class= "three" ></div>
<div class= "Four" ></div>
<div class= "Five" ></div>
</div>
<div class= "Loading" >
</div>
<div class= "Font" >loading</div>

@keyframes con-1{
from{
Transform:translate (0px);
}
to{
Transform:translate (310px);
}
}
@keyframes con-2{
from{
Transform:translate ( -150px);
}
to{
Transform:translate (280px);
}
}
@keyframes con-3{
from{
Transform:translate ( -300px);
}
to{
Transform:translate (260px);
}
}
@keyframes con-4{
from{
Transform:translate ( -450px);
}
to{
Transform:translate (230px);
}
}
@keyframes con-5{
from{
Transform:translate ( -600px);
}
to{
Transform:translate (210px);
}
}
. rect{
width:173px;
height:173px;
Background:url (.. /images/iconlist_1.png) No-repeat;
Display:inline-block;
}
. con-1{
width:173px;
animation:con-1 2s ease-in-out 5;
}
. con-2{
Background-position: -174px;
width:173px;
animation:con-2 2s ease-in-out 5;
}
. con-3{
Background-position: -348px;
width:173px;
animation:con-3 2s ease-in-out 5;
}
. con-4{
Background-position: -522px;
width:173px;
animation:con-4 2s ease-in-out 5;
}
. con-5{
Background-position: -696px;
width:173px;
animation:con-5 2s ease-in-out 5;
}
. music{
Display:block;
margin-left:640px;
width:200px;
height:200px;
position:relative;
margin-top:-180px;
}
@keyframes one{
from{
Transform:scale (a);
}
to{
Transform:scale (0.8)
}
}
@keyframes two{
from{
Transform:scale (a);
}
to{
Transform:scale (0.8)
}
}
@keyframes three{
from{
Transform:scale (a);
}
to{
Transform:scale (0.8)
}
}
@keyframes four{
from{
Transform:scale (a);
}
to{
Transform:scale (0.8)
}
}
@keyframes five{
from{
Transform:scale (a);
}
to{
Transform:scale (0.8)
}
}
. one{
width:6px;
height:60px;
Display:inline-block;
Background-color:black;
Position:absolute;
top:20px;
left:30px;
animation:one 1s linear 0s infinite;
}
. two{
width:6px;
height:50px;
Background-color:black;
top:20px;
left:40px;
Position:absolute;
animation:two 1s linear 0s infinite;
}
. three{
width:6px;
height:40px;
Background-color:black;
top:20px;
left:50px;
Position:absolute;
animation:three 1s linear 0s infinite;
}
. four{
width:6px;
height:30px;
Background-color:black;
top:20px;
left:60px;
Position:absolute;
animation:four 1s linear 0s infinite;
}
. five{
width:6px;
height:20px;
Background-color:black;
top:20px;
left:70px;
Position:absolute;
animation:five 1s linear 0s infinite;
}
@keyframes loading{
from{
Transform:rotate (0DEG);
}to{
Transform:rotate (360DEG);
}
}
. loading{
width:173px;
height:173px;
border-radius:50%;
margin-left:640px;
border-left:10px solid Green;
border-top:10px solid Green;
border-right:10px solid #b6b6b6;
border-bottom:10px solid #b6b6b6;
animation:loading 3s linear 0s infinite;
Margin-top: -100px;
}
. font{
margin-left:700px;
Margin-top: -120px;
Font-weight:bold;
Color:green;
font-size:24px;
}

CSS3 animation effects