css：css3新特性（过渡）

1、过渡的理解

（1）概念

过渡是css3中的新特性之一，可以让我们在不使用flash动画和js的情况下，当元素从一种样式转换为另外一种样式的的时候为元素添加效果
过渡动画：从一个状态渐渐地过渡到另一个状态的过程

（2）属性

花费时间：单位s，必须写
运动曲线：默认是ease，可省略
何时开始：单位s，必须写；可以设置延时触发事件，默认是0，可省略

2、过渡的应用

（1）不添加过渡效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <style>
            div {
                 300px;
                height: 300px;
                background-color: aqua;
            }
            
            div:hover {
                 340px;
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <div>

        </div>

    </body>

</html>

（2）添加过渡效果：

    <style>
            div {
                 300px;
                height: 300px;
                background-color:aqua;
                transition: width   1.5s;
            }
            div:hover{
                 340px;
                background-color: blue;
            }
        </style>

在鼠标经过的时候是一个渐变的过程：

（3）同时更改两个属性：

    <style>
            div {
                 300px;
                height: 300px;
                background-color:aqua;
                transition: width  1.5s 1s,height  1.5s 1s;
            }
            div:hover{
                 340px;
                height: 340px;
                background-color: blue;
            }
        </style>

效果展示：

简化写法：表示变化所有的属性

    <style>
            div {
                 300px;
                height: 300px;
                background-color:aqua;
                transition: all  1.5s 1s;
            }
            div:hover{
                 340px;
                height: 340px;
                background-color: blue;
            }
        </style>

3、html5

广义的html5是html5本身和css3和js组成的