首页 / CSS / css3学习总结9--CSS3过渡

css3学习总结9--CSS3过渡

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css3学习总结9--CSS3过渡，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1212字，纯文字阅读大概需要2分钟。

内容图文

CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡属性

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

下面的例子设置所有过渡属性：

实例

在一个例子中使用所有过渡属性：

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

简写的 transition 实例

实例

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

div
{
transition: width 1s linear 2s;/* Firefox 4 */

-moz-transition:width 1s linear 2s;/* Safari and Chrome */

-webkit-transition:width 1s linear 2s;/* Opera */

-o-transition:width 1s linear 2s;
}

原文：http://www.cnblogs.com/xuange306/p/4624664.html

内容总结

以上是互联网集市为您收集整理的css3学习总结9--CSS3过渡全部内容，希望文章能够帮你解决css3学习总结9--CSS3过渡所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1313363.html

来源：【匿名】