FileNav

online
online: /HTML & CSS/Animation.md

Animation

JavaScript Animation

JavaScript Animation Tools

CSS3 Animation

CSS Animation Tools

Keyframe Animation

@keyframes

@-webkit-keyframes animationname{/* Chrome ??, Safari ?? */
    from { top: 0px }
    to { top: 20px }
}
@-moz-keyframes animationname{/* Firefox */
    from { top: 0px }
    to { top: 20px }
}
@-ms-keyframes animationname{/* No implemented by IE yet */
    from { top: 0px }
    to { top: 20px }
}
@-o-keyframes animationname{/* Opera */
    from { top: 0px }
    to { top: 20px }
}
@keyframes animationname{/* W3C */
    from { top: 0px }
    to { top: 20px }
}

animation Shorthand

/*
animation: name duration timing-function delay iteration-count direction;
*/
.move-me{
    -webkit-animation: animationname 5s infinite;/* Safari and Chrome */
    -moz-animation: animationname 5s infinite;/* Firefox */
    -o-animation: animationname 5s infinite;/* Opera */
    animation: animationname 5s infinite;/* W3C */
}

animation Long Form

.move-me{
    /* Safari and Chrome */
    -webkit-animation-name: animationname;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    /* Firefox */
    -moz-animation-name: animationname 5s infinite;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    /* Opera */
    -o-animation-name: animationname 5s infinite;
    -o-animation-duration: 5s;
    -o-animation-iteration-count: infinite;
    /* W3C */
    animation-name: animationname 5s infinite;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

CSS3 Transitions and Transforms

CSS3 Rotation