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 {
                width: 300px;
                height: 300px;
                background-color: aqua;
            }
            
            div:hover {
                width: 340px;
                background-color: blue;
            }
        </style>
    </head>

    <body>
        <div>

        </div>

    </body>

</html>

css：css3新特性（过渡）_html

（2）添加过渡效果：

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

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

css：css3新特性（过渡）_css3_02

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

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

效果展示：

css：css3新特性（过渡）_过渡效果_03

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

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

 

 

3、html5

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

 

每个人都会有一段异常艰难的时光 。 生活的压力 ， 工作的失意 ， 学业的压力。 爱的惶惶不可终日。 挺过来的 ，人生就会豁然开朗。 挺不过来的 ，时间也会教你 ，怎么与它们握手言和 ，所以不必害怕的。 ——杨绛