CSS3 过渡
2021-07-13 17:06
标签：firefox table 支持 explore 鼠标移动 net intern code www 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 请把鼠标移动到下面的元素上： CSS3 过渡 Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。 注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 应用于宽度属性的过渡效果，时长为 2 秒： 注释：如果时长未规定，则不会有过渡效果，因为默认值是 0。 效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时： 规定当鼠标指针悬浮于 亲自试一试 注释：当指针移出元素时，它会逐渐变回原来的样式。 如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开： 向宽度、高度和转换添加过渡效果： CSS3 过渡 标签：firefox table 支持 explore 鼠标移动 net intern code www 原文地址：http://www.cnblogs.com/heysng123456/p/7078293.html浏览器支持
属性
浏览器支持
transition
它如何工作？
实例
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阴影和浮动
下一篇：HTML 发表说说 制作方法