On hover css animation

HTML

<a class="circle one" href="#">
1
</a>
<a class="circle two" href="#">
2
</a>
<a class="circle three" href="#">
    <span>3</span>
</a>
<a class="circle four" href="#">
    <span>4</span>
</a>
<a class="circle five" href="#">
    <span>5</span>
</a>
<a class="circle six" href="#">
    <span>6</span>
</a>
<a class="circle seven" href="#">
    <span>7</span>
</a>

CSS

/*
Animation compatible browsers:
ie: 10.0 or +
firefox: 28.0 or +
chrome: 33 or +
Safari: 7 or +
opera: 22 or +
iOS Safari: 3.2 or +
Android Browser: 2.1 or +
Blackberry Browser: 7 or +
IE Mobile: 10 or +
*/
.circle{
    background-color:#FFFFFF;
    color:#C0C0C0;
    border: 1px solid #C0C0C0;
    display: block;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    border-radius: 180px;
    transition: color 300ms ease-in-out 0s, 
    background-color 300ms ease-in-out 0s, 
    background-position 300ms ease-in-out 0s;
    font-family: arial;
    font-weight:bold;
    font-size:30px;
    float:left;
    margin-right:10px;
    text-decoration:none;
    
}
.circle:hover{
    color:#4679BD;
    background-color:#F7F7F7;
    animation: one 400ms ease-in-out;
}
@keyframes one {
0%   {transform: rotate(14deg);}
25%   {transform: rotate(-14deg);}
50%  {transform: rotate(8deg);}
75%   {transform: rotate(-8deg);}
100% {transform: rotate(4deg);}
}
/*-==second=-*/
.circle.two:hover{
    color:#4679BD;
    background-color:#F7F7F7;
    animation: two 600ms ease-in-out;
}
@keyframes two {
0%   {transform: scale(1.17,1.17);}
50%  {transform: scale(1,1);}
100% {transform: scale(1.09,1.09);}
}
/*-==third=-*/
.circle.three span{
    display:block;
}
.circle.three:hover span{
    animation: three 600ms ease-in-out;
}
.circle.three:hover{
    animation:none;
}
@keyframes three {    
    from {
        transform: translateY(20%);
    }
    to {
        transform: translateY(0%);
    }
}
/*-==fourth=-*/
.circle.four span{
    display:block;
}
.circle.four:hover span{
    animation: four 600ms ease-in-out;
}
.circle.four:hover{
    animation:none;
}
@keyframes four {    
    from {
        transform: translateY(-20%);
    }
    to {
        transform: translateY(0%);
    }
}
/*-==fifth=-*/
.circle.five span{
    display:block;
}
.circle.five:hover span{
    animation: five 600ms ease-in-out;
}
.circle.five:hover{
    animation:none;
}
@keyframes five {...