<!DOCTYPE html>  
<html>  
<head>  
<style>   
    div 
    {  
      width:200px;  
      height:200px;  
      animation:contoh1 5s ease-in infinite, contoh-1-2 5s ease-in-out infinite;  
      border-radius:40px;  
    }  

    @keyframes contoh1  
    {  
     0% {background:red;}  
     50% {background:yellow; width:100px; height:100px;}  
     100% {background:green; width:300px; height:300px;}  
    }  
    @keyframes contoh-1-2 
    {  
     0% {transform:translate(0px) scale(1.4) rotate(80deg);}  
     50% {transform:translate(250px) scale(1.2) rotate(40deg);}  
     100% {transform:translate(350px) scale(1) rotate(0deg);}  
    }  
  
</style>  
</head>  
<body>  
  
    <div></div>  
    <p> Setelah Animasi selesai, elemen kembali ke kondisi awalnya</p>  
  
</body>  
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.