css3 Animations Demo windmill

CSS3 Animations


Syntax
-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
3
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
3
animation-timing-function Describes how the animation will progress over one cycle of its duration.
Default "ease"
3
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"
3
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