正文

css Animation初体验

IP云
IP云V管理员/6 阅读
11/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

目前有越来越多的网站都使用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 ;

相关阅读

目录[+]