CSS animations

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="style.css" rel="stylesheet" />
    <style>
        @-webkit-keyframes smooth {
            from {
                left: 100px;
            }

            to {
                left: 1000px;
            }
        }

        @-webkit-keyframes translate {
            0% {
                -webkit-transform: translateX(100px);
            }

            100% {
                -webkit-transform: translateX(1000px);
            }
        }

        #div {
            position: absolute;
            left: 100px;
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        .animate {
            -webkit-animation-name: translate;
            -webkit-animation-duration: 3s;
            -webkit-animation-timing-function: linear;
            /*ease-in -> Slow at the beginning, and then speeds up.
ease-outFast -> Fast at the beginning, and then slows to a stop.
ease-in-out -> Starts slow, speeds up in the middle, and then slows to a stop.
linear -> Moves at an even speed from start to finish.*/
        }
    </style>
</head>
<body>
    <div id="div">div</div>

    <button id="anim">anim</button>
    <script>
        var div = document.getElementsByTagName('div')[0];
        document.getElementById('anim').addEventListener('click', function () {
            div.className = "animate";
        }, false);

        div.addEventListener('webkitAnimationEnd', function () {
            div.className = "";
            div.style.left = "1000px";
        }, false);
    </script>
</body>
</html>