floating object animation css

1.floating {   
2    animation-name: floating; 
3    animation-duration: 3s; 
4    animation-iteration-count: infinite; 
5    animation-timing-function: ease-in-out; 
6    margin-left: 30px; 
7    margin-top: 5px; 
8    background: #7F00FF;  /* fallback for old browsers */
9    background: -webkit-linear-gradient(to right, #E100FF, #7F00FF);  
10    background: linear-gradient(to right, #E100FF, #7F00FF);
11    color: white;
12} 
13  
14@keyframes floating { 
15    0% { transform: translate(0,  0px); } 
16    50%  { transform: translate(0, 15px); } 
17    100%   { transform: translate(0, -0px); }     
18}