animation - css

by redky

HTML

<div class="box"></div>

CSS

.box {
    width: 20px;
    height: 20px;
    position: absolute;
    background: #faa;
    -webkit-animation: rotate 2s linear 1 normal running 2s forwards;
}

@-webkit-keyframes rotate {
    0% {
        left: 0
    }
    100% {
        left: 400px;
    }
}
/* 
    animation: name duration function count direction play-state delay fill-mod;
*/

JavaScript

/*

animation-name: rot;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal/reverse/alternate/alternate-reverse;
animation-play-state: running/paused;
animation-delay: 0s;
animation-fill-mode: none/forwards/backwards/both;


animation: name duration function count direction play-state delay fill-mod;
*/