CSS中transition属性实现过渡效果

发布时间：2023-10-16 15:28:13 所属栏目：语言来源：

导读：这篇文章主要介绍“CSS中transition属性实现过渡效果怎么做，有哪些要注意”，有一些人在CSS中transition属性实现过渡效果怎么做，有哪些要注意的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容

这篇文章主要介绍“CSS中transition属性实现过渡效果怎么做，有哪些要注意”，有一些人在CSS中transition属性实现过渡效果怎么做，有哪些要注意的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

属性详解

transition属性目的是让css的一些属性（如background）的以平滑过渡的效果出现。它是一个合并属性，是由以下四个属性组合而成：

transition-property：设置应用过渡的CSS属性，如background。

transition-duration：设置过渡效果花费的时间。默认是 0。

transition-timing-function：设置过渡效果的时间曲线。默认是 "ease"。

transition-delay：规定过渡效果何时开始。默认是 0。

示例：

button{

    transition: background 1s;

    -webkit-transition: background 1s; /* Safari */

}

定义transition属性时，transition-property和transition-duration是必选，其他两个为可选。

transition-property和transition-duration

transition-property用来指定应用过渡效果的CSS属性，这些属性包括（可能不全）：

width

height

color

background (color, image, position)

transform (in the next post)

border (color, width)

position (top, bottom, left, right )

text (size, weight, shadow, word-spacing)

margin

padding

opacity

visibility

z-index

all

transition-duration属性用来设置指定属性的过渡效果花费时间，可以是秒（s）或者毫秒（ms）。

transition-delay和transition-timing-function

transition-delay用来设置过渡效果开始的时间，默认为0，可以是秒（s）或者毫秒（ms）。如果transition-delay是负数，表示过渡效果提前开始。

transition-timing-function用来设置过渡的效果，这些效果包括：

ease - 开始慢，中间快，结束慢

ease-in - 渐入效果，慢入快出

ease-out - 渐出效果，快入慢出.

ease-in-out - 开始慢和结束慢

cubic-bezier(n,n,n,n) - 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

示例：

button{

   transition: background 1s ease-in-out 2s;

   -webkit-transition: background 1s ease-in-out 2s; /* Safari */

}

多属性

对于多个属性，各个属性的效果以逗号隔开：

  button{

     transition: background 1s ease-in-out 2s, width 2s linear;

     -webkit-transition: background 1s ease-in-out 2s, width 2s linear; /* Safari */

   }

兼容性

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。

Safari 支持替代的 -webkit-transition 属性。

Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。

触发

需要注意的是，过渡效果是需要之前已经定义好了属性，过渡效果通过触发来应用，比如:hover, :focus, and :active等。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!