CSS3中的transition属性详解

2020-04-01 15:36:52

一、语法

transition: property duration timing-function delay 

transition属性是个复合属性,她包括以下几个子属性:

  • transition-property :规定设置过渡效果的css属性名称

  • transition-duration :规定完成过渡效果需要多少秒或毫秒

  • transition-timing-function :指定过渡函数,规定速度效果的速度曲线

  • transition-delay :指定开始出现的延迟时间

默认值分别为:all 0 ease 0 

注:transition-duration 时长为0,不会产生过渡效果

改变多个css属性的过渡效果时:

a{ transition: background 0.8s ease-in 0.3s,color 0.6s ease-out 0.3s;}

 

二、子属性

  • transition-property

transition-property: none |all |property;

值为none时,没有属性会获得过渡效果,值为all时,所有属性都将获得过渡效果,值为指定的css属性应用过渡效果,多个属性用逗号隔开

  • transition-duration

transition-duration:time;

该属性主要用来设置一个属性过渡到另一个属性所需的时间,也就是从旧属性过渡到新属性花费的时间长度,俗称持续时间

  • transition-timing-function

transition-timing-function:linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n);

该属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,解释下:

注意:值cubic-bezier(n,n,n,n)可以中定义自己的值,如 cubic-bezier(0.42,0,0.58,1)

复制代码

div {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 20px auto;
  border-radius: 100%;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-timing-function:ease;
 transition-timing-function:ease;
 
div:hover {
  border-radius: 0px;
}

复制代码

我试着换不同的值看看区别,但并不是很明显,把持续时间弄长点估计更能看出,但是因为gif太大怕传不上来所以就弄了3秒的时间。

ease:由快到慢到更慢

linear:恒速

ease-in:越来越快

ease-out:越来越慢

ease-in-out:先加速后减速

 

  • transition-delay

这个属性没什么说的了,就是过渡效果开始前的延迟时间,单位秒或者毫秒

 

再来个栗子:

复制代码

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: background;
  transition-property:background;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
      transition-delay:.18s;
}div:hover {
  background: #000;
}

复制代码


  • 2020-04-03 13:07:46

    flex布局与position:absolute/fixed的冲突问题

    导航栏内,平均分为四块,为了适配各种移动设备,使用了flex布局。 与此同时,产品经理要求:页面上滚越过封面图时,导航栏变为固定定位,浮在页面顶部。 拿到需求之后,思路就是先搞好布局,然后监听window.onscroll,当页面滚的距离大于封面图的时候,给ul加入position:fixed。

  • 2020-04-03 16:56:59

    Inkscape教程

    本教程演示了Inkscape基础使用。这是常规Inkscape文档,你可以预览、编辑、复制、保存。 本教程包括画布导航、管理文档、形状工具基础、选择技术、使用选择转换对象、分组、设置填充和画笔、对齐和Z顺序。有关更高级的主题请查看帮助菜单中的其它教程。

  • 2020-04-03 17:04:35

    Inkscape/SVG附中文教程PDF

    Inkscape中的终极工具是XML编辑器(Shift+Ctrl+X),可以实时显示整个文档的XML树形图。修改绘图时,你可以注意一下XML树形图中的变化。也可以在XML编辑器中修改文本、元素或者节点属性,然后在画图上查看效果。这是一个非常形象化的学习SVG格式的交互式工具。并且可以实现一些通常的编辑工具无法完成的功能。

  • 2020-04-03 19:09:31

    CryptoJS.enc.UTF8 中文乱码

    ret = CryptoJS.AES.encrypt(data,'secret key 123') content = ret.toString() result = CryptoJS.AES.decrypt(content,'secret key 123') print(result.toString(CryptoJS.enc.Utf8))

  • 2020-04-03 19:10:56

    nodejs与javascript中的aes加密

    aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES,已经被多方分析且广为全世界所使用。高级加密标准已然成为对称密钥加密中最流行的算法之一。

  • 2020-04-03 19:13:05

    Express-session的使用

    当浏览器访问服务器并发送第一次请求时,服务器端会创建一个 session 对象,生成一个类似于 key,value 的键值对,然后将 key(cookie)返回到浏览器(客户)端,浏览器下次再访问时,携带 key(cookie), 找到对应的 session(value)。 客户的信息都保存在 session 中

  • 2020-04-08 22:46:28

    Element的操作方法

    Element 是一个通用性非常强的基类,所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如, HTMLElement 接口是所有 HTML 元素的基本接口,而 SVGElement 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级(hierarchy)的接口中被进一步制定的。