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