Core CSS

Animation Properties Table

CSS Animation Properties
Value Appearance
Initial Specification: name duration timing-function delay iteration-count direction fill-mode play-state
@keyframes kfMoveRight {
    from {left: 0px;}
    to {left: 100px;}
}
animation: kfMoveRight 4s ease 2s infinite normal none running;
Animation Name
@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
animation-duration: 1s;
animation-duration: 5s;
animation-duration: 10s;
Animation Delay
animation-delay: 0s;
animation-delay: 6s;
animation-delay: 9s;
Animation Iteration Count
animation-iteration-count: 2;
animation-iteration-count: 5;
animation-iteration-count: 9;
Animation Direction
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
Animation Timing Function
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 (2 iterations, initially centered)
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
Animation Fill Mode
animation-play-state: running;
animation-play-state: paused;
 
 

© 2007–2022 XoaX.net LLC. All rights reserved.