Animation Properties Table

@keyframes kfMoveRight {
    from {left: 0px;}
    to {left: 100px;}
}
animation: kfMoveRight 4s ease 2s infinite normal none running;

@keyframes kfChangeColor {
    0% {background-color: red;}
    33.3% {background-color: green;}
    66.6% {background-color: blue;}
    100% {background-color: red;}
}
animation-name: kfChangeColor;

@keyframes kfChangeRadius {
    from {border-radius: 0px;}
    to {border-radius: 25px;}
}
animation-name: kfChangeRadius;

@keyframes kfExpand {
    from {width: 0px;}
    to {width: 150px;}
}
animation-name: kfExpand;

animation-duration: 1s;

animation-duration: 5s;

animation-duration: 10s;

animation-delay: 0s;

animation-delay: 6s;

animation-delay: 9s;

animation-iteration-count: 2;

animation-iteration-count: 5;

animation-iteration-count: 9;

animation-direction: normal;

animation-direction: reverse;

animation-direction: alternate;

animation-direction: alternate-reverse;

animation-timing-function: ease;

animation-timing-function: linear;

animation-timing-function: ease-in;

animation-timing-function: ease-out;

animation-timing-function: ease-in-out;

animation-timing-function: cubic-bezier(.25,1.0,0.0,.75);

animation-timing-function: cubic-bezier(.25,.5,.75,.5);

animation-timing-function: cubic-bezier(.25,0.5,.75,.25);

animation-fill-mode: none;

animation-fill-mode: forwards;

animation-fill-mode: backwards;

animation-fill-mode: both;

animation-play-state: running;

animation-play-state: paused;