1. 引子
昨天在某招聘網站上看到一個按鈕的背景過渡效果，本着學習的態度去琢磨了下transition的用法，下面是測試寫的效果,當鼠標放在按鈕上的時候,藍色背景斜着從左邊過去。大家第一時間有沒有想到是怎麼實現的哇？
2. transition、transform的配合使用
大家有沒有想到呢？我給大家揭曉。
先給大家說說思路，按鈕本身背景是透明的，按鈕的背後有一層(這裏可以用after或者before僞類)，背後的一層使用transform傾斜角度，用transition過渡寬度變化，初始化的時候背後的一層寬度爲0,當hover的時候寬度變寬。不多說，看代碼
html代碼：
<button class="ytf_btn">按鈕</button>
css代碼(scss)：
.ytf_btn{
position: relative;
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
color: #323232;
border: 1px solid #333333;
cursor: pointer;
-webkit-transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
transition: all .5s cubic-bezier(0.2, 0.0, 0.2, 1);
overflow: hidden;
font-weight: 600;
background: transparent;
&::after{
content: "";
position: absolute;
left: -3px;
top: -6px;
width: 0%;
height: 140%;
transform: rotate(8deg);
background-color: rgb(33, 4, 112);
z-index: -1;
transition: 1s background cubic-bezier(0.2, 0.0, 0.2, 1), 1s width cubic-bezier(0.2, 0.0, 0.2, 1);
}
&:hover{
color: #fff;
z-index: 0;
&::after{
width: 120%;
}
}
}
3. 總結
個人理解
transition的意思是轉變，我習慣把它說成過渡，它是css中動畫最簡單的一種。當一個元素的狀態變化，頁面一般是默認瞬間變化的，會給用戶一種強烈的視覺衝擊，加上transition過渡效果，會達到一種循序漸進的效果，交互和視覺體驗會讓用戶更加容易接受。
基礎知識
理解這種transition的關鍵點：
(1) 這些動畫是暗含的。你的JavaScript腳本和CSS都像往常一樣編寫。動畫只會簡單的發生在屬性值發生變化的時候。
(2) 不支持這些transition屬性的瀏覽器不會有任何動畫發生。你的JavaScript和css不會對正常的顯示帶來任何負面影響。
下面是transition屬性的分解介紹。所有的這些屬性都可以跟多個屬性值，用逗號分隔。
transition-property
允許值: none | all | <屬性名>
初始值: all
描述: 指明什麼屬性將觸發動畫效果。none 值表示沒有變化。 all 值表示所有可以動畫演示的屬性都可以觸發動畫效果。否則，只有指定的屬性值方式變化才能觸發動畫效果。
transition-duration
允許值: <時間>
初始值: 0
描述: 指明動畫持續的時間長度。
transition-timing-function
允許值: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
初始值: ease
描述: 這個 transition-timing-function 屬性描述了動畫隨着時間運動的速度-時間函數。可以使用幾種常見的調速函數，也可以使用立方貝塞爾(cubic bezier)函數加控制點來自定義動畫的變換速度方式。對於立方貝塞爾曲線方程，我們需要兩個點的（X,Y）來控制曲線。點 P0 固定是 (0,0) 而 P3 固定是 (1,1)。有了這個四個點就能計算出一條立方貝塞爾曲線。
這些調速函數的意思是這樣的：
linear – 線性函數，返回值一個輸入值一樣的結果。
ease – 減緩函數, 是缺省值, 等同於 cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – 等同於 cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – 等同於 cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – 等同於 cubic-bezier(0.42, 0, 0.58, 1.0)
bezier cubic-bezier – P0 和 P3 兩個點分別是 (0,0) 和 (1,1) 。再加上另外兩個點 (x1, y1,
x2, y2) 就定義了一個立方貝塞爾曲線
下面這篇文章有詳細的介紹使用
css3中的變形（transform）、過渡(transtion)、動畫(animation)詳細介紹
