CSS3過渡

Gckkoo發表於2017-10-31
CSSS3

CSS3過渡

特點

（1）本質上是一幀動畫，一幀結束後，就沒有然後了

（2）過渡的效果的實現，必須通過使用者的行為，可能觸發的行為：hover 、focus、click。或者通過JS程式碼

1、 transition的屬性

transition-property：指定元素的過渡屬性
transition-duration:規定了過渡的時間
transition-timming-function:規定以何種方式過渡
ease：表示的是快速的：預設值
ease-in：先慢後快
ease-out：先快後慢
linear：表示的是線性平緩的變化
steps(X):表示的是過渡分幾步完成，X只能為正數

2、縮寫

transition: property duration function depay
transition :指定過渡的屬性 過渡的時間 過渡的方式 過渡的延遲

3、觸發過渡

只有當使用者觸發事件，過渡事件才能進行，比如使用者點選、滑鼠移入移除等等，這是他的一個侷限性

4、侷限性

    <style>
        #box{
            height: 100px;
            width: 100px;
            background:skyblue;
            position: absolute;
            left:0;
            transition-property: left width;
            transition-duration: 2s;
        }
        body:hover #box{
            left: 800px;
            width: 200px;
        }
        body{
            height: 500px;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>

相關文章