关于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：（正方形到圆形的过渡）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background: red;
            transition: all 2s linear 0s;
        }
        div:hover{
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

示例2：（模拟人的衰老过程）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        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);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

最后，来一个温馨提醒： 对于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%;

关于CSS3的过渡

关于css3的过渡

示例1：（正方形到圆形的过渡）

示例2：（模拟人的衰老过程）