CSS3：属性transition和animation的用法

文 | 归仓 图 | 网络

01

首先，先来介绍下这两个CSS3属性单词的意思，一个过渡transition和另一个动画animation。CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或者JavaScript，用transition就可以实现。

下面，我们就先来讲解下transition是如何工作的。CSS3过渡是元素从一种样式逐渐改变为另一种效果。要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性

指定效果的持续时间

div {

width: 100px;

transition: width 2s, transfrom 2s;

}

div:hover {

width: 200px;

transform: rotate(180deg);

}

# 当鼠标hover时，元素宽度2s内变为原来的两倍，2s内旋转顺时针180度

02

其次，我们再来讲下CSS3动画animation。CSS3中，我们可以创建动画，它可以取代许多网页动画图像，Flash动画和JavaScript。动画animation是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%。其中，0%是动画的开始，100%是动画的完成。

CSS3 @keyframes规则：

要创建CSS3动画，你将不得不了解@keyframes规则。@keyframes规则是创建动画。@keyframes规则内指定一个CSS样式和动画将逐步从目前样式更改为新的样式。

当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器：

规定动画的名称

规定动画的时长

下面的这个例子是5s内div的背景色由红逐步变黄。

@keyframes myfirst {

from {

background: red;

}

to {

background: yellow;

}

}

div {

animation: myfirst 5s 1 linear;

animation-fill-mode: forwards; # 动画完成后保持最后一个属性值

}

animation-timing-function: steps(1, start); #一帧一帧切换

上述CSS是一个class为loading的元素实现转圈loading加载的效果。效果图如下：

大家可以写一个HTML页面，body元素下仅仅需要一个

的元素即可。

扫下面关注