CSS3应用transition特性完成过渡实际效果

2020-10-16 03:07 jianzhan

特性详解

transition特性目地是让css的1些特性(如background)的以光滑过渡的实际效果出現。它是1个合拼特性,是由下列4个特性组成而成:

  • 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等。

总结

以上所述是网编给大伙儿详细介绍的CSS3应用transition特性完成过渡实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!