First experience with css Animation_html/css_WEB-ITnose

More and more websites are using animation, whether they are displayed in GIF, SVG, WebGL, video background or other forms. Appropriate use of animation can make a website more lively and interactive, adding an extra layer of feedback and experience for users.

In this tutorial I will introduce you to CSS animations; which have become more and more popular as browser support improves, CSS animations are very performant in doing some things. After covering the basics, we'll build a quick example: animating a rectangle turning into a circle.

See the demo here

@keyframes and animation Introduction

The main components of css animation: @keyframes, css rules for creating animations. Think of @keyframes as a timeline of animation steps. In @keyframes, you can define these steps, each with a different style statement.

The second step is to enable the CSS animation to run. You need to bind a selector to @keyframes. Based on these steps, all code declared by @keyframes will be parsed and the new style will be initialized.

The @keyframes

Here we will set the steps for animation. The properties of @keyframes are as follows:

The name of the selector (in this example is tutsFade) .

Steps: 0%-100%; from (equal to 0%) and to (equal to 100%).

CSS style: to be applied at each stage Style.

Example:

@keyframes tutsFade {

0% {

opacity: 1 ;

}

100% {

opacity: 0 ;

}

}

or:

@keyframes tutsFade {

from {

opacity: 1 ;

}

to {

opacity: 0 ;

}

}

Abbreviation:

@keyframes tutsFade {

to {

opacity: 0 ;

}

}

The above code applies an opacity transition to the element, from opacity: 1 to opacity: 0. The effect achieved by the above three methods is the same.

The Animation

animation attributes:

animation-name: @keyframes name (in this case tutsFade).

animation-duration: time interval, total length of animation from start to end.

animation-timing-function: set animation speed (linear | ease | ease-in | ease-out | ease-in- out | cubic-bezier ).

animation-delay: The delay before the animation starts.

animation-iteration-count: How many times it will iterate during the animation.

animation-direction: Change the direction of the loop, from start to end, end to start, or both.

animation-fill-mode: Specify the style to be applied to the element when the animation ends (none | forwards | backwards | both ).

For example:

.element {

animation-name: tutsFade;

animation-duration: 4 s;

animation-delay: 1 s;

animation-iteration-count: infinite;

animation-timing-function: linear;

animation-direction: alternate;

}

abbreviated as:

.element {

animation: tutsFade 4 s 1 s linear infinite alternate;

}

The above code will create a blinking effect, 1 second animation delay, 4 second animation interval, alternating directions and infinite linear loop iteration.

Add browser prefix:

At work, we need to use browser-specific prefixes to ensure the best browser support. Standard prefix application:

Chrome & Safari: -webkit-

Firefox: -moz-

Opera: -o-

Internet Explorer: -ms-

动画属性使用了浏览器前缀的形式：

.element {

     -webkit-animation: tutsFade 4 s 1 s infinite linear alternate;

     -moz-animation: tutsFade 4 s 1 s infinite linear alternate;

     -ms-animation: tutsFade 4 s 1 s infinite linear alternate;

     -o-animation: tutsFade 4 s 1 s infinite linear alternate;

     animation: tutsFade 4 s 1 s infinite linear alternate;

}

@keyframes的前缀使用：

@-webkit-keyframes tutsFade { /* your style */ }

@-moz-keyframes tutsFade { /* your style */ }

@-ms-keyframes tutsFade { /* your style */ }

@-o-keyframes tutsFade { /* your style */ }

@keyframes tutsFade { /* your style */ }

 

更多浏览器前缀： http://css3please.com/

 

多动画

使用逗号分割添加多动画。为tutsFade 元素添加回转，我们要声明一个额外的@keyframes然后绑定到元素上：

.element {

   animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;

}

@keyframes tutsFade {

   to {

     opacity: 0 ;

   }

}

@keyframes tutsRotate {

   to {

     transform: rotate( 180 deg);

   }

}

 

------------------------------------分割线--------------------------------------------------------------------

矩形变圆形实例

这个例子中总共有五个步骤，每个步骤将为元素定义一个圆角，一个回转和不同的背景色，下面是实现的步骤和代码。

基本元素

首先创建一个标记，动画的元素。甚至不用class，仅仅只用一个div:

Then use element selection to add styles to the div:

div {

width : 200px ;

height : 200px ;

background-color: coral;

}

Declare Keyframes

Define a @keyframes named square-to-circle. The five steps are as follows:

@keyframes square-to-circle {

0% {}

25% {}

50% {}

75% {}

100% {}

}

You need to define some styles for each step, start by defining rounded corners for each rectangle corner:

@-webkit-keyframes square-to- circle {

0% {

border-radius: 0 0 0 0 ;

}

25% {

border-radius: 50% 0 0 0 ;

}

50% {

border-radius: 50% 50% 0 0 ;

}

75% {

border-radius: 50% 50% 50% 0 ;

}

100% {

border-radius: 50% ;

}

}

Then define a different background color for each step:

@keyframes square -to- circle {

0% {

border-radius: 0 0 0 0 ;

background :coral;

}

25 % {

border-radius: 50% 0 0 0 ;

background: darksalmon;

}

50% {

border-radius: 50% 50% 0 0 ;

background :indianred; % 50% 0 ;

background :lightcoral;

}

100% {

border-radius: 50%;

background :darksalmon;

}

}

Rotate the DIV to add a little visual effect:

@keyframes square-to- circle {

   0%  {

     border-radius: 0 0 0 0 ;

     background :coral;

     transform:rotate( 0 deg);

   }

   25%  {

     border-radius: 50% 0 0 0 ;

     background :darksalmon;

     transform:rotate( 45 deg);

   }

   50%  {

     border-radius: 50% 50% 0 0 ;

     background :indianred;

     transform:rotate( 90 deg);

   }

   75%  {

     border-radius: 50% 50% 50% 0 ;

     background :lightcoral;

     transform:rotate( 135 deg);

   }

   100% { 

     border-radius: 50% ;

     background :darksalmon;

     transform:rotate( 180 deg);

   }

}

应用动画

定义了square-to-circle动画后，需要将它应用到div上：

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

   animation: square-to- circle 2 s 1 s infinite alternate; 

}

上面使用了简写的动画属性，它们的状态是：

动画名：square-to-circle.

动画间隔：2s.

动画延迟：1s.

动画循环次数是无限的.

动画运行方向是交替的, 首先从开始到结束，然后返回到最开始，然后到结束，循环往复。

使用Timing-Function

可以为animation添加的最后一个属性是animation-timing-function.定义移动的速度，加速或者减速。这个函数可以是一个非常详细的值，尴尬的手动计算，但是有很多免费的网站为timing-function提供资源和在线定制。

例如：CSS Easing Animation Tool，现在来计算我们的定时功能。

运用立方贝塞尔函数为square-to-circle动画添加伸缩效果。

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

   animation: square-to- circle 2 s 1 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate; 

}

The final code without using the browser prefix ( -webkit- , -moz- , -ms- , -o- ) is as follows:

div {

width : 200px;

height: 200px;

background-color: coral;

animation: square-to- circle 2 s . 5 s infinite cubic-bezier( 1 , . 015 ,. 295 , 1.225 ) alternate;

}

@keyframes square-to- circle {

0% {

border-radius: 0 0 0 0 ;

background :coral;

transform:rotate( 0 deg);

}

25% {

; border-radius: 50% 0 0 0 ;

background: darksalmon;

transform:rotate( 45 deg);

}

50% {

border-radius: 50% 50% 0 0 ;

background :indianred;

transform:rotate( 90 deg);

}

75% {

border-radius: 50% 50% 50% 0 ;

background: lightcoral;

transform: rotate( 135 deg);

}

100% {

border-radius: 50%;

background: darksalmon;

transform:rotate( 180 deg);

}

}

Last Things

View in Modern Everything runs fine in the browser, but rendering objects in Firefox is a bit lacking and the edges appear jagged:

Fortunately, there is a workaround. After adding a transparent outline to the div, Firefox will render perfectly!

outline: 1px solid transparent; >