Xem ví dụ

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        #test{
            width:100px;
            height:100px;
            position:relative;
            left:200px;
            background-color:red;
            animation-name:move;
            animation-duration:3s;
            animation-delay:2s;
            animation-fill-mode:none;
        }
        @keyframes move{
            from{
                left:0px;
                background-color:green;
            }
            to{
                left:400px;
                background-color:blue;
            }
        }
    </style>
</head>
<body>
  <div id="test"></div>
</body>
</html>
none (mặc định)
forwards
backwards
both