css3 Animations Demo windmill

CSS3 Animations

-webkit-animation: <name> <duration> <timing_function> <delay> <iteration_count> <direction>;

Demo / Download

Create animations in CSS3 using @keyframes

Browser Support
Property Browser Support
IE Firefox Chrome Safari Opera
@keyframes X -moz- -webkit- -webkit- -o-
animation X -moz- -webkit- -webkit- -o-

CSS3 Animation Properties
the @keyframes rule and all the animation properties:
Property Description CSS
@keyframes Specifies the animation 3
animation A shorthand property for all the the animation properties, except
the animation-play-state property
animation-name Specifies the name of the @keyframes animation 3
animation-duration Specifies how many seconds or milliseconds an animation takes to
complete one
cycle. Default 0
animation-timing-function Describes how the animation will progress over one cycle of its duration.
Default "ease"
animation-delay Specifies when the animation will start. Default 0 3
animation-iteration-count Specifies the number of times an animation is played. Default 1 3
animation-direction Specifies whether or not the animation should play in reverse on
alternate cycles. Default "normal"
animation-play-state Specifies whether the animation is running or paused. Default "running" 3

Demo Mouse Hover on image

css3 Animations Demo windmill css3 Animations Demo windmill Reviewed by Bhaumik Patel on 9:27 PM Rating: 5