CSS 3 animation introduction, CSS 3 Animation

CSS 3 animation introduction, CSS 3 Animation

Original article: A Beginner's Introduction to CSS Animation

A beginner's introduction to CSS Animation

Translator: dwqs

Nowadays, more and more websites use animations in various formats, such as GIF, SVG, WebGL, and background videos. When the animation is used properly in the web, it can inject vitality and good interaction into the website, and provide users with an additional layer of feedback and experience.

In this article, I will introduce you to CSS animation. With the improvement of the browser's support for animation, an efficient way of doing things is becoming increasingly popular. Taking basic knowledge into account, I will quickly create an animation case from a square to a circle.

First look at the effect: http://jsfiddle.net/Web_Code/tchoafyh/embedded/result/

Introduction to @ keyframes and animation

The main component of CSS animation is @ keyframes. This rule is used to create an animation. Think of @ keyframes as different stages of the timeline. inside it, you can customize different stages of the timeline, each stage has different CSS declarations.

Then, to make the CSS animation take effect, you need to bind @ keyframes to a selector. At last, all the code in @ keyframes will be parsed, divided by stages, and the initial style will be changed to a new style.

@ Keyframes Element

First, define the separation of animations. @ Keyframes attributes:

1. Select a name (in the case I chose tutsFade)

2. phase division: 0%-100%, from 0% to 100%

3. CSS style: the style you want to use at each stage

For example:

@keyframe tutsFade{    0%{        opacity:1;    }    100%{        opacity:0;    }}

 

Or:

@keyframe tutsFade{     from{           opacity:1;     }     to{           opacity:0;     }}

 

There is also a short form:

@keyframe tutsFade{     to{           opacity:0;     }}

 

The above Code applies a transitional effect to the transparency of the elements: from 1 to 0, the final effect of the three methods is the same.

Animation

The Animation acts as a selector to call @ keyframes. Animation has many attributes:

1. animation-name: @ keyframes name (for example, tutsFade)

2. animation-duration: animation duration

3. animation-timing-function: Set the animation speed effect. You can select linear/audio-in/Audio/extract-out/audio-in-out/cubic-bezeiser.

4. animation-delay: the time delay before the animation starts.

5. animation-iteration-count: Number of animation cycles

6. animation-direction: Specifies whether or not the animation is played in Reverse Rotation. normal indicates that the animation is played normally. alternate indicates that the animation is played in reverse rotation.

7. animation-fill-mode: Specifies whether the animation effect is visible before or after playback (none/forwards/backwards/both)

For example:

.element {  animation-name: tutsFade;  animation-duration: 4s;  animation-delay: 1s;  animation-iteration-count: infinite;  animation-timing-function: linear;  animation-direction: alternate;}

 

Abbreviation:

.element {  animation: tutsFade 4s 1s infinite linear alternate;}

Add private prefixYou need to add a private prefix for a specific browser to ensure that the best browsers support: chrome & Safari:-webkit-; Firefox:-moz-; Opera:-o-; IE: -ms-Modify as follows:

.element {    -webkit-animation: tutsFade 4s 1s infinite linear alternate;    -moz-animation: tutsFade 4s 1s infinite linear alternate;    -ms-animation: tutsFade 4s 1s infinite linear alternate;    -o-animation: tutsFade 4s 1s infinite linear alternate;    animation: tutsFade 4s 1s infinite linear alternate;}

 

@ Keyframes: the same is true.

@-webkit-keyframes tutsFade { /* your style */ }@-moz-keyframes tutsFade { /* your style */ }@-ms-keyframes tutsFade { /* your style */ }@-o-keyframes tutsFade { /* your style */ }@keyframes tutsFade { /* your style */ }

 

To get the private prefix of more browser vendors, you can go to http://css3please.com/to check and find resources that are very convenient.

Multiple animations

You can add multiple animations separated by commas.

.element {  animation: tutsFade 4s 1s infinite linear alternate,             tutsRotate 4s 1s infinite linear alternate;}@keyframes tutsFade {  to {    opacity: 0;  }}@keyframes tutsRotate {  to {    transform: rotate(180deg);  }}

 

Square to circular animation tutorialUsing the above rules, I will create a simple graphic animation. There are five phases in total, and different Border-radius, rotation, and background-color elements are defined for each phase. 1. Basic Elements

div {  width: 200px;  height: 200px;  background-color: coral;}

 

2. Declare Keyframes

Create a keyframe element named square-to-circle, which contains five phases

@keyframes square-to-circle {  0%  {    border-radius:0 0 0 0;    background:coral;    transform:rotate(0deg);  }  25%  {    border-radius:50% 0 0 0;    background:darksalmon;    transform:rotate(45deg);  }  50%  {    border-radius:50% 50% 0 0;    background:indianred;    transform:rotate(90deg);  }  75%  {    border-radius:50% 50% 50% 0;    background:lightcoral;    transform:rotate(135deg);  }  100% {     border-radius:50%;    background:darksalmon;    transform:rotate(180deg);  }}

3. Apply animations

Apply the defined animation to the previous div

div {  width: 200px;  height: 200px;  background-color: coral;  animation: square-to-circle 2s 1s infinite alternate; }

 

4. Use Time Functions and add private prefixes

The animation attribute to be added is the animation-timing-function, which defines the speed, acceleration, and deceleration of the animation element. A similar Tool is: CSS Easing Animation Tool, which can be used to calculate time functions.

In this case, I added a cubic-bezr function to the animation.

div {  width: 200px;  height: 200px;  background-color: coral;  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate; }

 

To ensure the best browser support, you must add a private prefix (the code without a prefix is as follows)

div {  width: 200px;  height: 200px;  background-color: coral;  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;} @keyframes square-to-circle {  0%  {    border-radius:0 0 0 0;    background:coral;    transform:rotate(0deg);  }  25%  {    border-radius:50% 0 0 0;    background:darksalmon;    transform:rotate(45deg);  }  50%  {    border-radius:50% 50% 0 0;    background:indianred;    transform:rotate(90deg);  }  75%  {    border-radius:50% 50% 50% 0;    background:lightcoral;    transform:rotate(135deg);  }  100% {     border-radius:50%;    background:darksalmon;    transform:rotate(180deg);  }}

 

The display in FireFox may be a little abnormal. To achieve excellent display in FireFox, you can add the following style to the div:

outline: 1px solid transparent;

Next article: [translation] use the Menu and Menuitem elements in HTML 5 to quickly create a Menu