CSS3 过滤

 

CSS3 过滤

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

浏览器支持

属性	浏览器支持
transition

IE10、Firefox、Chrome以及Opera支持transition属性。

Safari需要前缀-webkit-。

注释：IE9以及更早的版本，不支持transition属性。

注释：Chrome 25以及更早的版本，需要前缀-webkit-.

 它如何工作？

CSS3过滤是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 规定你希望把效果添加到那个CSS属性上
• 规定效果的时长

        div.transitionOne {
            transition: width 3s;
            width: 200px;
            border: 1px solid red;
            height: 100px;
        }
        div:hover {
            width:300px;
            border:10px solid red;
        }

 注释：如果时长未规定，则不会有过滤效果，因为默认值是0.

效果开始于指定的CSS属性改变值时。CSS属性改变的典型时间是鼠标指针位于元素上时。当指针移除元素时，他会逐渐变回原来的样子。

多项改变

如需向多个样式添加过度效果，请添加多个属性，用逗号隔开：

        div.transitionOne {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background-color: orange;
            transition: width 2s,height 2s,transform 2s;
            transform-origin: left top;
        }

        div:hover {
            width: 200px;
            height: 200px;
            transform: skew(30deg,30deg);
        }

过度属性

下面表格列出了所有的转换属性：

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

实例1：

        div.transitionOne {
            width: 100px;
            height: 100px;
            transition-property: width;
            transition-duration: 2s;
            transition-timing-function:linear;
            transition-delay: 1s;
            background-color: blue;
        }
        div:hover {
            width: 200px;
        }

实例2：

简写transition属性

        div.transitionOne {
            width: 100px;
            height: 100px;
            background-color: orange;
            transition: width 1s linear 2s;
        }
        div:hover {
            width:200px;
            background-color:red;
        }