CSS3使用transition属性实现过渡效果

发布时间:2022-04-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了CSS3使用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等。

总结

以上所述是小编给大家介绍的CSS3使用transition属性实现过渡效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本宝典网站的支持!

脚本宝典总结

以上是脚本宝典为你收集整理的CSS3使用transition属性实现过渡效果全部内容,希望文章能够帮你解决CSS3使用transition属性实现过渡效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:css3