首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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元素下仅仅需要一个

的元素即可。

扫下面关注

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180420G1VFKS00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券