CSS3 Tutorial-Animations

Maybe you've seen a lot about CSS3 animations, including some of the ones that were published before front-end development, so now take a look at the basics of CSS3 tutorial-animation.

CSS3 Animations:

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 Animations:

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:

1, the name of the specified animation;

2, specify the length of the animation.

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 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:

div{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:

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

The above is CSS3 Tutorial-animation content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

