CSS animation-duration Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.warn { 
   background: #fc0; 
   padding: 10px; 
} 
.fadeInLeft { 
   -webkit-animation-name: fadeInLeft; 
   -webkit-animation-duration: 1s; 
   animation-name: fadeInLeft; 
   animation-duration: 1s; 
} 
@-webkit-keyframes fadeInLeft { 
   from { 
      opacity: 0; transform: translateX(-2000px); 
   } 
   to { 
      opacity: 1; transform: none; 
   } 
} 
@keyframes fadeInLeft { 
   from { 
      opacity: 0; transform: translateX(-2000px); 
   } 
   to { 
      opacity: 1; transform: none; 
   } 
}
.message {
   margin-top: 50px;
}
</style>
</head>
<body>
<div class="warn fadeInLeft">Important message to users!</div>
<div class="message">Demonstration of animation-duration property, if you missed it, just click on either HTML or CSS above and then click on Result.</div>
</body>
</html>