CSS3 过渡
2021-07-13 05:05
标签：idt 逗号 webkit pre class 变换 function 样式 多个 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。 效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时： 规定当鼠标指针悬浮于 如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开： 向宽度、高度和转换添加过渡效果： 下面的表格列出了所有的转换属性： 在一个例子中使用所有过渡属性： CSS3 过渡 标签：idt 逗号 webkit pre class 变换 function 样式 多个 原文地址：http://www.cnblogs.com/JG37WY/p/7079960.htmlCSS3 过渡
div
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
实例
div:hover
{
width:300px;
}
多项改变
实例
div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
过渡属性
属性
描述
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;
}
上一篇：TCP/IP、Http大纲