今天我们来讨论一下CSS3属性中的transition属性；

时间：2017-11-16 15:25:59 阅读：228 评论：0 收藏：0 [点我收藏+]

标签：select outer height text utf-8 div ace png char

transition属性是CSS3属性；顾名思义英文为过渡的意思；主要有四个值与其一一对应；分别是property(CSS属性名称)，duration过渡的时长，timimg-function转速曲线函数（其对应着多个已经设置好的值如：ease，ease-in-out 等），delay延时单位为毫秒（延迟多少秒开始过渡）；

技术分享

首先我们写个简单的div；

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>HTML标签</title>
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>

    <body>
　　　　　　　　

            <div class="CsOuterdiv">
                
            </div>
    </body>

</html>

/*作者:Alide 2017年11月15日*/
@font-face {
    font-family:MyfirstFont;
    src: url(../css/font/Lucia_BT.ttf);
}
html,
body {
    position: relative;
    width: 100%;
    min-width: 1300px;
    height: 100%;
    min-height: 700px;
    margin: 0px;
    padding: 0px;
    background-color: #F9F9F9;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.CsOuterdiv {
    position: relative;
    width: 300px;
    height:200px;
    background-color: deepskyblue;
    /*transition: all 2s ease-in-out 1s;*/
}
.CsOuterdiv:hover{
    /*width: 500px;*/
    /*height: 600px;*/
    /*background-color: blue;*/
}