CSS Example - Tuts Insider

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 150px; 
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: animation 5s infinite;
  color: #fff;
  text-align: center;
  font-size: 30px;
  margin: 5px;
  padding: 10px;
  border-radius: 10px;
}

#t {animation-timing-function: linear; background:#2a73cc;}
#u {animation-timing-function: ease; background: #2567b7;}
#t {animation-timing-function: ease-in; background: #215ca3;}
#s {animation-timing-function: ease-out; background: #1d508e;}
#insider {animation-timing-function: ease-in-out;background: #153966; padding: 10px 50px;}

@keyframes animation {
  from {left: 0px;}
  to {left: 50%; transform: translate(-50%);}
}
</style>
</head>
<body>

<h1>Welcome To CSS Animation</h1>

<p>Learn advanced CSS tutorials with Tuts Insider. This is an introductory tutorial which depicts the use of CSS Animations.</p>

<div id="t">T</div>
<div id="u">U</div>
<div id="t">T</div>
<div id="s">S</div>
<div id="insider">INSIDER</div>

</body>
</html>