使用transition樣式讓效果的變化更加平滑

時間 2019-11-08

標籤使用 transition 樣式效果變化更加平滑简体版

原文原文鏈接

1、CSS3樣式transition介紹

做用：transition在英文中的意思是過渡和轉變，顧名思義，在CSS中添加這個樣式能夠讓一些效果的變化產生過渡效果而讓人不會感受突兀；css
transition屬性的值 transition屬性有四個經常使用值； 1.property：屬性（設置效果的CSS樣式名）； 2.duration：持續時間（設置效果持續的時間）； 3.timing-function：過渡效果的時間線（設置效果的快慢變化）；該值有五個可選選項： linear 規定以相同速度開始至結束的過渡效果。 ease 規定慢速開始，而後變快，而後慢速結束的過渡效果。 ease-in 規定以慢速開始的過渡效果。 ease-out 規定以慢速結束的過渡效果。 ease-in-out 規定以慢速開始和結束的過渡效果。此外還能夠使用cubic-bezier(n,n,n,n)函數對n進行數字設置來控制效果的時間線； 4.delay：過渡效果延遲多少時間再展現（設置過渡效果的觸發時機）；html
transition屬性的寫法（縮寫） transition: property duration timing-function delay; 瀏覽器

2、小例子展現transition樣式的使用

使用transition樣式的property和duration使鼠標移動上去後背景色產生淡入淡出的效果

使用property，duration和timing-function使div寬度變寬，切變化速度由塊到慢；代碼以下（效果沒法截圖顯示，可自行復制展現）：函數

<!DOCTYPE html> 
<html> 
<meta charset="uft-8">
<head> 
<style>
    div {
        width: 200px;
        height: 200px;
        background: yellow;
        transition: width 5s ease;
    }
    div:hover {
        width: 1000px;
    }
</style> 
</head> 
<body> 
     <div></div>
</div> 
</body> 
</html>
複製代碼