css3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。下面通过本文给大家介绍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等。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
如何使用CSS3实现千变万化的文字阴影text-shadow的效果
CSS3的animation实现简易幻灯片轮播特效
以上就是关于CSS3使用transition属性实现过渡效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610372.html
微信扫一扫 
支付宝扫一扫 
