Study on animation making of CSS3 teaching

CSS3 Animation

With CSS3, we are able to create animations that can replace animated images, Flash animations, and JavaScript in many Web pages.

CSS3 @keyframes Rules

To create animations in CSS3, you need to learn @keyframes rules.

@keyframes rules are used to create animations. By stipulating a CSS style in the @keyframes, you can create an animated effect that changes from the current style to the new style.

Browser support

Internet Explorer 10, Firefox, and Opera support @keyframes rules and animation properties.

Chrome and Safari need a prefix of-webkit-.

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

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 a @keyframes, bundle it to a selector, otherwise it will not animate.

You can bind an animation to a selector by stipulating at least the following two CSS3 animation properties:

Specify the name of the animation

Specify the duration of the animation

Instance

Bind the "Myfirst" animation to the P element, duration: 5 seconds:

P{animation:myfirst 5s;-moz-animation:myfirst 5s;/* Firefox */-webkit-animation:myfirst 5s;/* Safari and Chrome */-o-anim Ation:myfirst 5s;/* Opera */}

Note: You must define the name and duration of the animation. If the duration is omitted, 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 any number of times.

Use percentages to specify when changes occur, or use the words "from" and "to", equivalent to 0% and 100%.

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

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

Instance

Change the background color when the animation is 25% and 50%, and then change it again when animation 100% finishes:

@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 Properties

The following table lists @keyframes rules and all animation properties:

The following two examples set all animation properties:

Instance

Run an animation named Myfirst, where all animation properties are set:

p{animation-name:myfirst;animation-duration:5s;animation-timing-function: Linear;animation-delay:2s;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:2s;-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:2s;- 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:2s;-o-animation-iteration-count:infinite;-o-animation-direction:alternate;-o- animation-play-state:running;} 

Instance

Same as the previous animation, but uses the shorthand animation animation property:

P{animation:myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation:myfirst 5s linear 2s infinite alternate ;/* Safari and Chrome: */-webkit-animation:myfirst 5s linear 2s infinite alternate;/* Opera: */-o-animation:myfirst 5s Lin ear 2s infinite alternate;}

"Recommended"

1. CSS3 Free Video Tutorial

2. Detailed analysis of new features in CSS3

3. A detailed description of the new features of CSS3

4. Recommended 10 examples of CSS3 animations

5. Share a CSS3 animation library