Introduction to CSS 3 animations

Original: A beginner ' s Introduction to CSS Animation

A beginner's introduction to CSS animations

Translator: Dwqs

Now, more and more websites are animated and in various forms, such as GIF, SVG, WebGL, background video and so on. When animation is used properly in the web, it can inject vitality and interactivity into the site, giving the user an extra layer of feedback and experience.

In this article, I'll introduce you to CSS animations, which are becoming more and more popular as browsers improve animation support. Given the basics, I'll quickly build an animated case that turns from a square to a circle.

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

Introduction to @keyframes and animations

The main component of CSS animation is @keyframes, a rule that is used to create animations. Consider @keyframes as a different stage of the timeline, within which you can customize the different stages of the timeline, with different CSS declarations at each stage.

Then, in order for the CSS animation to take effect, you need to bind @keyframes and a selector. In the end, we will gradually parse all the code within the @keyframes, dividing it into stages and slowly changing the original style into a new style.

@keyframes element

First, define the separation of the animations. The properties of the @keyframes are as follows:

1. Choose a name (in case I choose Tutsfade)

2, Stage Division: 0%–100%, from 0% to 100%

3, CSS style: you want to use in every stage of the style

For example:

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

or:

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

There is also a shorthand form:

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

The code above will apply a transition effect to the transparency of the element: from 1 to 0, three ways the final effect is the same.

Animation

Animation as a selector to call @keyframes. Animation has a number of properties:

1, Animation-name: Name of @keyframes (e.g. Tutsfade)

2, Animation-duration: The duration of the animation

3, Animation-timing-function: Set the speed effect of animation, you can choose Linear/ease-in/ease/ease-out/ease-in-out/cubic-bezier

4. Animation-delay: Time delay before animation starts

5, Animation-iteration-count: The number of animation cycles

6, Animation-direction: Specify whether the animation is reverse rotation, normal is the default value, play normally; alternate represents an animated reverse carousel

7, Animation-fill-mode: Specifies whether the animation effect is visible before or after the play (None/forwards/backwards/both)

For example:

. Element {  tutsfade;  4s;  1s;  Infinite;  linear;  animation-directionalternate;}

Shorthand:

. Element {  tutsfade 4s 1s infinite linear alternate;}

Add a private prefix you need to add a private prefix for a specific browser to ensure the best browser support:chrome&safari:-webkit-; firefox:-moz-;opera:-o-;ie:-ms-Modify the following:

. Element {    tutsfade 4s 1s infinite linear alternate;    tutsfade 4s 1s infinite linear alternate;    tutsfade 4s 1s infinite linear alternate;    tutsfade 4s 1s infinite linear alternate;    tutsfade 4s 1s infinite linear alternate;}

@keyframes, too .

/ * Your style * / / * Your style * / / * Your style * / / * Your style * / / * Your style * /}

To get more private prefixes for browser vendors, you can go to http://css3please.com/, find, and provide a very rich resource.

Multi-animation

You can add multiple animations, separating each animation with commas.

. Element {  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-round animated tutorials using the above rules, I will create a simple graphic animation. There will be 5 stages in total, and different border-radius,rotation and Background-color will be defined for the elements at each stage. 1. Basic Elements

Div {  width200px;  Height 200px;  Background-color coral;}

2. Declaration KeyFrames

Create a keyframe element named Square-to-circle that contains 5 stages

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

Apply the defined animation to the previous Div

Div {  width200px;  Height 200px;  Background-color Coral;  animation:square-to-circle 2s 1s infinite alternate; }

4. Using the time function and adding a private prefix

The last animated property to be added is Animation-timing-function, which defines the speed, acceleration, and deceleration of animated elements. A similar tool is the CSS easing Animation tool, which can be used to calculate the time function.

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

Div {  width200px;  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 also add a private prefix (code with no prefix added below)

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); }}

This will be a bit unusual in Firefox, in order to have a great display in Firefox, you can add the following style to the Div

Outline  1px solid transparent;

Next: "Translate" quickly create a menu using the menu and MenuItem elements in HTML 5

Introduction to CSS 3 animations