CSS3 Animation Animation transform

<! DOCTYPE html>
<!--saved from Url= (0073) http://www.w2bc.com/demo/201504/2015-04-27-jquery-tecent-focus/index.html--


<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta charset= "GBK" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
&LT;TITLE&GT;CSS3 Animation Animation transform</title>
<!--<link href= "css/app.min.css" rel= "stylesheet" >-->
<style>
* {
margin:0;
padding:0;
}
Ul
Li {
List-style:none;
}
. side-nav-ul {
width:168px;
position:fixed;
right:0;
top:200px;
}
. side-nav-item {
height:50px;
line-height:50px;
Background:orange;
Text-align:center;
Transition:all. 5s linear;
margin-left:84px;
}
. side-nav-item:hover {
Margin-left: -20px;
}
. Side-nav-item a {
Color: #fff;
Text-decoration:none;
}
#yuan {
width:100px;
height:100px;
Background:orange;
position:fixed;
top:50%;
left:50%;
Margin-left: -50px;
Margin-top: -50px;
-webkit-animation:border-radius 3s ease 0s infinite normal;
-moz-animation:border-radius 3s ease 0s infinite normal;
-o-animation:border-radius 3s ease 0s infinite normal;
Animation:border-radius 3s ease 0s infinite normal;
}
@-webkit-keyframes Border-radius {
0% {
border-radius:0;
Background:blue;
}
30% {
border-radius:10px;
Transform:translatex (100px);
}
50% {
border-radius:50px;
Transform:scale (2);
}
70% {
border-radius:10px;
}
100% {
border-radius:0;
}
}
</style>

<body style= "width:100%;" >
<div id= "fullpage" class= "style=" height:755px; " >
<div id= "Sidenav" class= "Side-nav Side-nav-1" >
<ul class= "Side-nav-ul" >
<li class= "Side-nav-item" >
<a href= "javascript:;" hidefocus= "ture" >
<i class= "S-icon s-icon-home" ></i> title One
</a>
</li>
<li class= "Side-nav-item side-nav-item-cur" >
<a href= "javascript:;" hidefocus= "ture" >
<i class= "S-icon s-icon-game" ></i> Title II
</a>
</li>
<li class= "Side-nav-item" >
<a href= "javascript:;" hidefocus= "ture" >
<i class= "S-icon s-icon-literature" ></i> Title III
</a>
</li>
<li class= "Side-nav-item" >
<a href= "javascript:;" hidefocus= "ture" >
<i class= "S-icon s-icon-comic" ></i> Title IV
</a>
</li>
<li class= "Side-nav-item" >
<a href= "javascript:;" hidefocus= "ture" >
<i class= "S-icon s-icon-film" ></i> title Five
</a>
</li>
<li class= "Side-nav-item" >
<a href= "javascript:;" hidefocus= "ture" >
<i class= "S-icon s-icon-copyright" ></i> Title VI
</a>
</li>
</ul>
</div>
<div id= "Yuan" ></div>

</body>

CSS3 Animation Animation transform