css Animation初体验

目前有愈来愈多的网站都使用animation，不管他们是用GIF，SVG，WebGL，视频背景或者其余形式展现。适当地使用动画会让网站更生动，互动性更好，为用户增长一个额外的反馈和体验层。

在本教程中我会向你介绍CSS动画；随着浏览器支持性的提升已经变得愈来愈流行了，css动画在作一些事情上有很高的性能。在涵盖了基础知识后，咱们将建一个快速的例子：矩形变成圆形的动画。

演示看这里

 

@keyframes和动画 介绍

css动画的主要组件：@keyframes，建立动画的css规则。把@keyframes想象为动画步骤的时间轴。在@keyframes里，你能够定义这些步骤，每一个都有不一样的样式声明。

第二步，让css动画能运行，须要为@keyframes绑定一个选择符。基于这些步骤，@keyframes声明的全部代码都会变解析而后对新的样式进行初始化。

 

The @keyframes

这里咱们将会设置动画的步骤，@keyframes的属性以下：

• 选择符的名字（这个例子中是tutsFade） .
• 步骤：0%-100%;  from (equal to 0%) and to (equal to 100%).
• CSS 样式: 每一个阶段要应用到的样式.

例子：

@keyframes tutsFade {

   0% {

     opacity: 1 ;

   }

   100% {

     opacity: 0 ;

   }

}

或者：

@keyframes tutsFade {

   from {

     opacity: 1 ;

   }

   to {

     opacity: 0 ;

   }

}

简写：

@keyframes tutsFade {

   to {

     opacity: 0 ;

   }

}

 

上面的代码为元素应用一个不透明度的过渡，从opacity: 1到opacity: 0.上面三种方法实现的效果是同样的。

 

The Animation

animation的属性：

• animation-name: @keyframes名称 (此例为 tutsFade).
• animation-duration:时间间隔，动画从开始到结束的总长.
• animation-timing-function: 设置动画速度 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
• animation-delay:动画开始前的延迟.
• animation-iteration-count: 在动画期间它会遍历多少次.
• animation-direction: 改变循环的方向，从开始到结束，仍是从结束到开始，或者二者都.
• animation-fill-mode: 指定动画结束时元素应用的样式 ( none | forwards | backwards | both ).

例如：

.element {

   animation-name: tutsFade;

   animation-duration: 4 s;

   animation-delay: 1 s;

   animation-iteration-count: infinite;

   animation-timing-function: linear;

   animation- direction : alternate;

}

简写为：

.element {

   animation: tutsFade 4 s 1 s infinite linear alternate;

}

上面的代码会建立一个闪烁效果，1秒的动画延迟，4秒的动画间隔，交替的方向和无限线性循环迭代.

增长浏览器前缀：

在工做中，咱们须要使用浏览器指定前缀确保最好的浏览器支持。标准前缀应用：

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

<div></div>

而后运用元素选择为div添加样式：

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

}

声明Keyframes

定义一个 @keyframes,命名为square-to-circle，五个步骤以下：

@keyframes square-to-circle {

   0% {}

   25% {}

   50% {}

   75% {}

   100% {}

}

须要为每一个步骤定义一些样式，开始为每一个矩形角定义圆角：

@-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% ;

   }

}

而后为每一个步骤定义不一样的背景色：

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

   }

   75%  {

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

     background :lightcoral;

   }

   100% { 

     border-radius: 50% ;

     background :darksalmon;

   }

}

旋转DIV添加一点视觉效果：

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

}

最终的没有使用浏览器前缀(  -webkit- ,  -moz-,  -ms-,  -o- ) 的代码以下：

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

   }

}

 

最后的事情

在现代浏览器中一切运行正常，可是在Firefox中渲染对象有点不足，边缘会出现锯齿：

幸运的是，有一个解决方法。在div上添加透明的outline以后Firefox就会完美地渲染！

outline: 1px solid transparent;