css3过渡缓慢排过去,关于CSS3的过渡

关于css3的过渡

针对css3过渡这一块来说，总体讲涉及到了四个属性值：transition-property(规定需要使用过渡的名称,一般情况使用all)、transition-duration(定义在过渡中产生变化需要的时间，默认值为0)、transition-timing-function(规定了过渡的时间变化效果)、transition-delay(规定了过渡开始的时间，默认是值为0)。一般来说都会使用这一个属性(transition)，即可以完全包含以上四个属性值，具体格式如下：transition：(transition-property)(transition-duration) (transition-timing-function) (transition-delay)

关于transition-timing-function，它有如下关键字：

ease: 开始和结束慢，中间快。相当于cubic-bezier(0.25,0.1,0.25,1)

linear: 匀速。相当于cubic-bezier(0,0,1,1)

ease-in: 开始慢。相当于cubic-bezier(0.42,0,1,1)

ease-out: 结束慢。相当于cubic-bezier(0,0,0.58,1)

ease-in-out: 和ease类似，但比ease幅度大。相当于cubic-bezier(0.42,0,0.58,1)

step-start: 直接位于结束处。相当于steps(1,start)

step-end: 位于开始处经过时间间隔后结束。相当于steps(1,end)

关于transition-property，它有类似关键字：

none

all

width

height

background-image

......

接下来用几个实例详细演示：

示例1：(正方形到圆形的过渡)

Document

div{

width: 200px;

height: 200px;

margin: 100px auto;

background: red;

transition: all 2s linear 0s;

}

div:hover{

border-radius: 50%;

}

复制代码

示例2：(模拟人的衰老过程)

Document

div{

width: 300px;

height: 430px;

border: 2px solid red;

background-image: url(img/bg.jpg);

transition:all 3s linear 0s;

}

div:hover{

background-image: url(img/hover.jpg);

}

复制代码

因需要图片两张，在此处附上：

最后，来一个温馨提醒：

对于CSS3的兼容性问题：由于CSS3中很多新的属性，在有的浏览器中还没有实现，所以在使用

CSS3的时候，需要考虑到兼容性问题，对于兼容性问题，不同的浏览器处理不太一样，一般情况

我们只考虑五大浏览器，如下：

IE -ms-

Chrome -webkit-

Firefox -moz-

Safari -webkit-

Opera -o-

当我们在写CSS3新属性时，一个属性，我们需要写5遍，前4次是有前缀的，最后一次是没有前缀，目的

就是为了主上面的五大浏览器很好的去支持我们CSS3中的新属性。如：border-radius。 我们的写法如下：

-ms-border-radius:50%;

-webkit-border-radius:50%;

-moz-border-radius:50%;

-ms-border-radius:50%;

border-radius:50%;