Introduction to CSS 3 animation_html/css_WEB-ITnose

Original text: A Beginner's Introduction to CSS Animation

Translation: A Beginner's Introduction to CSS Animation

Translator ：dwqs

Nowadays, more and more websites use animations in various forms, such as GIF, SVG, WebGL, background video, etc. When animation is used appropriately in the web, it can inject vitality and interactivity into the website, providing users with an extra layer of feedback and experience.

In this article, I will introduce you to CSS animations, an efficient way of doing things that is becoming more and more popular as browser support for animations improves. With the basics in mind, I'm going to quickly build an example of an animation that changes from a square to a circle.

Let’s take a look at the effect first: http://jsfiddle.net/Web_Code/tchoafyh/embedded/result/

Introduction to @keyframes and animations

The main component of CSS animation is @keyframes, this rule is used to create animation. Think of @keyframes as different stages of the timeline. Inside it, you can customize the different stages of the timeline, with different CSS declarations for each stage.

Then, in order for the CSS animation to take effect, @keyframes need to be bound to a selector. Finally, all codes in @keyframes will be gradually parsed, divided into stages, and the original style will be slowly changed into a new style.

@keyframes element

First, define the separation of the animation. The attributes of @keyframes are as follows:

1. Choose a name (in this case I choose tutsFade)

2. Stage 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 A transition effect will be applied to the transparency of the element: from 1 to 0, the final effect of the three methods is the same.

Animation

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

1. animation-name: the name of @keyframes (such as 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 the animation starts

5. animation-iteration-count: the number of animation loops

6. animation-direction: specifies whether the animation rotates in reverse, normal is the default Value, normal playback; alternate represents animation reverse carousel

7. animation-fill-mode: Specifies whether the animation effect is visible before or after the animation is played (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 prefix

You need to add browser-specific private prefixes to ensure the best browser support: chrome&Safari:-webkit-;Firefox:-moz-;Opera:-o-;IE:-ms-

The modification is 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 is the same

>

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

In order to get more private prefixes of browser vendors, you can go to http://css3please.com/, which provides very rich resources.

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 Circle Animation Tutorial

Using the rules above, I will create a simple graphic animation. There will be a total of 5 stages, and in each stage different Border-radius, rotation and background-color will be defined for the elements.

1. Basic elements

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

2. Declare Keyframes

Create a keyframe element named square-to-circle, containing 5 stages

3. Apply animation

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

Apply the defined animation Previous div

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

4. Use time function and add private prefix

最后要添加的一个动画属性是animation-timing-function,它对动画元素的速度、加速和减速进行定义。一个类似的工具是：CSS Easing Animation Tool，可以使用它来计算时间函数。

在案例中，我给动画添加了一个cubic-bezier函数。

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

 

为了保证最好的浏览器支持，还必须添加私有前缀（没有添加前缀的代码如下）

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

 

这个在FireFox显示会有点异常，为了在FireFox有绝佳的显示效果，可以给div添加如下样式

outline: 1px solid transparent;