CSS3 animation and css3 Animation

CSS3 animation and css3 Animation
 

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScript in many webpages.

CSS3 Animation

CSS3 @ keyframes rules

To create an animation in CSS3, you need to learn the @ keyframes rule.

@ Keyframes rules are used to create animations. Specify a CSS style in @ keyframes to create an animation effect that is gradually changed from the current style to the new style.

Browser support

Attribute	Browser support
@ Keyframes
Animation

Internet Explorer 10, Firefox, and Opera support the @ keyframes rule and the animation attribute.

Chrome and Safari require the prefix-webkit -.

Note: Internet Explorer 9 and earlier versions do not support @ keyframe rules or the animation attribute.

Instance

@ Keyframes myfirst {from {background: red;} to {background: yellow; }}@-moz-keyframes myfirst/* Firefox */{from {background: red ;} to {background: yellow; }}@-webkit-keyframes myfirst/* Safari and Chrome */{from {background: red ;}to {background: yellow ;}} @-o-keyframes myfirst/* Opera */{from {background: red;} to {background: yellow ;}}

CSS3 Animation

When you create an animation in @ keyframes, bind it to a selector. Otherwise, no animation effect will be generated.

You can bind an animation to a selector by specifying at least two CSS3 animation attributes:

• Specifies the animation name
• Specifies the animation duration

Instance

Bind the "myfirst" animation to the div element. Duration: 5 seconds:

Div {animation: myfirst 5S;-moz-animation: myfirst 5S;/* Firefox */-webkit-animation: myfirst 5S;/* Safari and Chrome */-o-animation: myfirst 5S;/* Opera */}

Note: You must define the animation name and duration. If the duration is ignored, the animation is not allowed because the default value is 0.

What is an animation in CSS3?

Animation is the effect of gradually changing an element from one style to another.

You can change any number of styles to any number of times.

Use percentages to specify the time when the change occurred, or use the keywords "from" and "to", equivalent to 0% and 100%.

0% is the start of the animation, and 100% is the completion of the animation.

To get the best browser support, you should always define the 0% and 100% selectors.

Instance

When the animation is 25% and 50%, the background color is changed, and then the animation is changed again when 100% is completed:

@ Keyframes myfirst {0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green ;}} @-moz-keyframes myfirst/* Firefox */{0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green ;}@- webkit-keyframes myfirst/* Safari and Chrome */{0% {background: red;} 25% {background: yellow;} 50% {background: blue ;} 100% {background: green; }}@-o-keyframes myfirst/* Opera */{0% {background: red;} 25% {background: yellow;} 50% {background: blue ;}100% {background: green ;}}

Instance

Change the background color and position:

@ Keyframes myfirst {0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}} @-moz-keyframes myfirst/* Firefox */{0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-webkit-keyframes myfirst/* Safari and Chrome */{0% {background: red; left: 0px; top: 0px ;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-o-keyframes myfirst/* Opera */{0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px ;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}}

CSS3 animation attributes

The following table lists the @ keyframes rules and all animation attributes:

Attribute	Description	CSS
@ Keyframes	Specifies the animation.	3
Animation	The short attribute of all animation properties except the animation-play-state attribute.	3
Animation-name	Specifies the name of the keyframes animation.	3
Animation-duration	Specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0.	3
Animation-timing-function	Specifies the animation speed curve. The default value is "renew ".	3
Animation-delay	Specifies when the animation starts. The default value is 0.	3
Animation-iteration-count	Specifies the number of times an animation is played. The default value is 1.	3
Animation-direction	Specifies whether the animation is played reversely in the next cycle. The default value is "normal ".	3
Animation-play-state	Specifies whether the animation is running or paused. The default value is "running ".	3
Animation-fill-mode	Specifies the State beyond the animation time of an object.	3

The following two examples set all animation attributes:

Instance

Run the animation named myfirst, with all the animation attributes set:

Div {animation-name: myfirst; animation-duration: 5S; animation-timing-function: linear; animation-delay: 2 s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running;/* Firefox: */-moz-animation-name: myfirst;-moz-animation-duration: 5S; -moz-animation-timing-function: linear;-moz-animation-delay: 2 s;-moz-animation-iteration-count: infinite;-moz-animation-direction: alternate;-moz-animation-play-state: running;/* Safari and Chrome: */-webkit-animation-name: myfirst;-webkit-animation-duration: 5S; -webkit-animation-timing-function: linear;-webkit-animation-delay: 2 s;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: alternate;-webkit-animation-play-state: running;/* Opera: */-o-animation-name: myfirst;-o-animation-duration: 5S; -o-animation-timing-function: linear;-o-animation-delay: 2 s;-o-animation-iteration-count: infinite;-o-animation-direction: alternate;-o-animation-play-state: running ;}

 

Instance

The animation is the same as the animation above, but the short animation attribute is used:

Div {animation: myfirst 5S linear 2 s infinite alternate;/* Firefox: */-moz-animation: myfirst 5S linear 2 s infinite alternate;/* Safari and Chrome: */-webkit-animation: myfirst 5S linear 2 s infinite alternate;/* Opera: */-o-animation: myfirst 5S linear 2 s infinite alterate ;}