Edit in JSFiddle

<div style="width: 200px; height: 200px; padding: 50px 100px; border: solid 4px yellow; margin: 0px auto; box-shadow: 10px 12px 15px black; background-color: rgba(0, 0, 0, 0.5);">
<div id="kf" style="text-align: center;"><strong>Animation X 2 fois</strong><br /><strong>puis arr&ecirc;t</strong><br /><strong> F5 pour relancer<br />Test&eacute; avec Chrome</strong></div>
</div>

#kf
{
width:150px;
height:100px;
padding:5px;
border:solid 4px red;
box-shadow:6px 6px 10px black;
background:red;
position:relative;
animation:mymove 10s infinite;
-webkit-animation:mymove 10s 2; /* Safari and Chrome */
}

@keyframes mymove
{
0%   {top:0px; left:0px; background:red;border:solid 4px blue;}
25%  {top:0px; left:100px; background:blue;border:solid 4px yellow;box-shadow:8px 8px 12px black;}
50%  {top:100px; left:100px; background:yellow;border:solid 4px green;box-shadow:6px 6px 10px black;}
75%  {top:100px; left:0px; background:green;border:solid 4px red;box-shadow:4px 4px 8px black;}
100% {top:0px; left:0px; background:red;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; left:0px; background:red;border:solid 4px blue;border-radius:5px;}
25%  {top:0px; left:100px; background:blue;border:solid 4px yellow;box-shadow:8px 8px 12px black;width:200px;border-radius:15px;}
50%  {top:100px; left:100px; background:yellow;border:solid 4px green;box-shadow:6px 6px 10px black;width:150px;height:150px;border-radius:25px;}
75%  {top:100px; left:0px; background:green;border:solid 4px red;box-shadow:4px 4px 8px black;width:120px;border-radius:18px;}
100% {top:0px; left:0px; background:red;border-radius:15px;}
}