CSS 變換 過渡 動畫使用案例
目錄
方塊“Z”字形運動
線段圍繞盒子運動
餅圖［動圖， 固定比例，如20%］
移動端錄音旋轉小按鈕效果實現［漸變色］［初始原型］
junruchen/junruchen。github。io方塊“Z”字形運動
要求：5s鍾迴圈五次；每次的執行時間為2s；每一次執行到底部後反方向執行；最後停留在最後一幀
考察：animation基本屬性值
點選檢視效果
重點程式碼說明：
animation： move 2s linear 0s 5 alternate forwards；
引數含義moveanimation-name 動畫名稱2sanimation-duration 動畫持續時間， 注意加上單位linearanimation-timing-function 動畫過渡型別，linear：線性過渡0sanimation-delay 動畫延遲時間，注意加上單位5animation-iteration-count 動畫迴圈次數， infinite表示無限迴圈alternateanimation-direction 動畫是否有反向運動， normal：正向執行； reverse：反向執行； alternate：先正向後反向； alternate-reverse：先反向後正向forwardsanimation-fill-mode 動畫時間之外的狀態， none： 不設定； forwards：設定為結束時的狀態； backwords：設定為開始時的狀態； both：動畫結束或開始的狀態
詳細程式碼示例：
dom結構：
基本樣式：
。box{
position： relative；
width： 200px；
height： 200px；
background-color： #fb3；
}
。box 。square{
position： absolute；
width： 30px；
height： 30px；
background-color： #58a；
animation： move 2s linear 0s 5 alternate forwards； //動畫，這裡要注意，時間必須帶上單位
}
move動畫定義
@keyframes move {
0% {
transform： translateX（0）；
}
33% {
transform： translateX（170px）；
}
66% {
transform： translate（0， 170px）；
}
100% {
transform： translate（170px， 170px）；
}
}
junruchen/junruchen。github。io線段圍繞盒子運動
要求：線段圍繞盒子運動
考察：clip的用法
這個動畫效果使用animation並不能很好的實現，最終實現方法是使用了 clip 屬性，該屬性用來剪裁物件。動畫實現的原理是用line-box盒子覆蓋住box盒子，line-box無背景只設置邊框，然後使用clip進行剪裁。
clip語法：rect（number number number number），依據上-右-下-左的順序剪裁，如設定為auto則該邊不剪裁。
點選檢視效果
程式碼示例：
dom結構：
基本樣式：
。box{
position： relative；
width： 200px；
height： 200px；
background-color： #fb3；
}
。box 。line-box{
position： absolute；
width： 220px； //多出來的20畫素為線段到盒子的邊距
height： 220px；
left： 0；
top： 0；
margin-left： -10px；
margin-top： -10px；
border： 2px solid #58a；
box-sizing： border-box；
animation： move 5s linear infinite；
}
move動畫定義
@keyframes move {
0% {
clip： rect（0 220px 2px 0）； //依據上-右-下-左的順序剪裁
}
25% {
clip： rect（0 0 220px 2px）；
}
50% {
clip： rect（2px 220px 0 0）；
}
75% {
clip： rect（0 2px 220px 0）；
}
}
junruchen/junruchen。github。io餅圖
動態餅圖
點選檢視效果
實現方法：
首先繪製餅圖基本形狀，使用使用漸變色生成背景 程式碼：
。box {
border-radius： 50%；
background： linear-gradient（to right， #58a 50%， #fb3 0）；
}
效果：
藉助偽元素蓋住右側背景，且需要設定圓角（ Border詳解 ）。
更改旋轉中心
設定動畫，動畫在旋轉到50%時，需更改偽元素的背景由藍色變成黃色。
程式碼示例：
。box：before {
content： ‘’；
position： absolute；
width： 50%；
height： 100%；
background-color： #58a；
right： 0；
border-radius： 0 100% 100% 0 / 50%；
transform-origin： left center；
animation： rotate 6s linear infinite， changeColor 12s step-end infinite；
}
@keyframes rotate{
to{
transform： rotate（180deg）；
}
}
@keyframes changeColor{
50%{
background-color： #fb3；
}
}
任意大小餅圖
預覽效果
如果知道animation-delay一個比較神奇的用法，那這個效果就很容易實現了。
注意：一個負值的延時值是合法的，與0s的延遲類似，它意味著動畫會立即開始播放，但會自動前進到延時值的絕對值處，就好像動畫在過去已經播放了指定的時間一樣。因此實際效果就是動畫跳過指定時間而從中間開始播放了。
所以我們只需增加偽元素的程式碼：
。box：before {
。。。
animation-delay： -3s；
animation-play-state： paused；
}
最終程式碼如下：
。box {
position： relative；
width： 200px；
height： 200px；
margin： 0 auto；
margin-top： 50px；
border-radius： 50%；
background： linear-gradient（to right， #58a 50%， #fb3 0）；
animation-delay： -7。5s；
}
。box：before {
content： ‘’；
position： absolute；
width： 50%；
height： 100%；
background-color： #58a；
right： 0；
border-radius： 0 100% 100% 0 / 50%；
transform-origin： left center；
animation： rotate 6s linear infinite， change 12s step-end infinite；
animation-delay： inherit；
animation-play-state： paused；
}
@keyframes rotate{
to{
transform： rotate（180deg）；
}
}
@keyframes change{
50%{
background-color： #fb3；
}
}
junruchen/junruchen。github。io移動端錄音旋轉小按鈕效果實現［漸變色］
類似移動端的點選錄音按鈕的效果，或者是loading的原始效果，［初始原型，有待最佳化］。
效果圖：
預覽效果
實現方法［個人見解］：左側與右側分別控制，分別旋轉。
dom結構：
item-right， 右側需設定漸變色背景且為半圓形，選擇一個灰色作為漸變色的中間點，這裡選擇的是#666，效果圖如下：
程式碼：
。box 。item-right {
position： absolute；
width： 50%；
height： 100%；
top： 0；
right： 0；
border-radius： 0 100% 100% 0/50%； /*設定圓角以實現半圓效果*/
background： linear-gradient（#fff， #666）； /*漸變色背景*/
}
item-right， 使用偽元素覆蓋住原本的顏色，這裡需要注意的是，為了使偽元素更好的覆蓋住item-right的顏色，可使用等比放大或者加陰影等方法，這裡選擇的是陰影。
。box 。item-right：before{
content： ‘’；
position： absolute；
width： 100%；
height： 100%；
top： 0；
left： 0；
border-radius： inherit；
background-color： #fff；
box-shadow： 3px 0 2px 2px #fff；
}
左側同理，但是要注意圓角和顏色需更改：
border-radius： 100% 0 0 100%/50%；
background： linear-gradient（#000， #666）；
item-center主要是實現中間的小圓，可在這個圓上進行多種操作：
。box 。item-center{
position： absolute；
width： 190px；
height： 190px；
border-radius： 50%；
background-color： #fff；
top： 5px；
left： 5px；
line-height： 190px；
}
下面開始實現旋轉。
右側選中中心在左側中間，而左側的旋轉中心在右側中間，所以需要分別設定transform-origin屬性。
右側先開始旋轉，第一個動畫設定旋轉動畫，第二個動畫則設定當旋轉結束時，右側偽元素的顏色為透明色，以便左側旋轉。
animation： rotate 30s linear infinite， changeColor 60s step-end infinite；
左側旋轉需設定延遲時間，右側旋轉結束方可開始。
animation： rotate 30s 30s linear infinite；
兩個動畫的程式碼：
@
keyframes
rotate
{
to
{
transform
：
rotate
（
180
deg
）；
}
}
@keyframes changeColor
{
50
%{
background
-
color
：
transparent
；
}
}
