<!DOCTYPE html>  
<html>  
<head>  
<style>   
    div {  
        width: 100px;  
        height: 100px;  
        background: red;  
        position: relative;  
        -webkit-animation: animasiku 5s; /* Chrome, Safari, Opera */  
        animation: animasiku 5s;  
    }  
    /* Chrome, Safari, Opera */  
    @-webkit-keyframes animasiku {  
        0%   {background:red; left:0px; top:0px;}  
        25%  {background:yellow; left:300px; top:0px;}  
        50%  {background:blue; left:200px; top:300px;}  
        75%  {background:green; left:0px; top:200px;}  
        100% {background:red; left:0px; top:0px;}  
    }  
    /* Standard syntax */  
    @keyframes animasiku {  
        0%   {background:red; left:0px; top:0px;}  
        25%  {background:yellow; left:300px; top:0px;}  
        50%  {background:blue; left:300px; top:200px;}  
        75%  {background:green; left:0px; top:200px;}  
        100% {background:red; left:0px; top:0px;}  
    }  
</style>  
</head>  
<body>  
    <p><b>Catatan :</b> Browser IE 9 dan yang lama tidak mendukung property CSS3 animation.</p>  
    <div></div>  
</body>  
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.