文 | 归仓 图 | 网络
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元素下仅仅需要一个
的元素即可。
扫下面关注
领取专属 10元无门槛券
私享最新 技术干货