animate4.aspx font size:
View Sample
<html>
<head>
<title>CSS Animation Demo: Diagonal Glide with Rotate</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<style type="text/css">
<!--
#target {
   animation-name: glide-rotate;
   animation-duration: 6s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: 3;
   animation-fill-mode: backwards;
}
@keyframes glide-rotate {
   0% {
      translate: -120vw -40vw;
      rotate: 0deg;
   }
   25%, 75% {
      translate: 0px 0px;
   }
   50% {
      translate: 120vw -40vw;
      rotate: 360deg;
   }
   50.1% {
      translate: -120vw 80vw;
   }
   100% {
      translate: 120vw 80vw;
      rotate: 0deg;
   }
}
</style>
</head>

<body>
<div class="header"><h2>CSS Animation Demo: <b>Diagonal Glide with Rotate</b></h2></div>
<hr size=1 width=92%>

<center>

<h4>A simple animation that diagonally glides and rotates an object from all corners of the browser window,<br>
   and repeats the sequence 3 times.</h4>

<img id="target" src="/shared/images/saturn.gif">

<p><button id="playButton" style="display: none" 
   onclick="location.href=location.href">Play</button></p>

</center>

<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->

</body>
<script type="text/javascript" src="showButt.js"></script>
</html>