您现在的位置是：网站首页> 编程资料编程资料

CSS3使用transition属性实现过渡效果CSS3 translate导致字体模糊的实例代码利用css3 translate完美实现表头固定效果CSS3 3D位移translate效果实例介绍结合 CSS3 transition transform 实现简单的跑马灯效果的示例详解css3 Transition属性（平滑过渡菜单栏案例）css3 中translate和transition的使用方法

2023-10-20 274人已围观

简介 CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。下面通过本文给大家介绍CSS3使用transition属性实现过渡效果，需要的朋友参考下本文

属性详解

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

示例：

 button{ transition: background 1s; -webkit-transition: background 1s; /* Safari */ }

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

transition-property和transition-duration

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

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

transition-delay和transition-timing-function

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

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

示例：

 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属性实现过渡效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！