過渡函數ease-in等實際上是貝塞爾曲線的實現

過渡函數還有一個step()函數，用於把整個操作領域劃分成同樣大小的間隔

圖解

簡寫，多屬性逗號隔開

.test{
    transition: all .2s ease-in .2s;
}

觸發方式

偽元素觸發

:hover :active :checked :focus

媒體查詢觸發

@media

使用js腳本觸發

小技巧

.test{
    background-color: blue;
    transition: background-color .2s ease-in;
}

.test:hover{
    background-color
 
: red;
    transition: background-color .2s ease-out;
}

硬件加速

.test{
    width: 200;
    transition: width .2s ease-in;
    transform:translate(0);
}
.test:hover{
    width: 100;
    transition: width .2s ease-out;
}

CSS3學習筆記-過渡