CSS3 - 過渡 and 動畫
阿新 • • 發佈：2018-11-11
目錄
1、transition-property（過渡屬性樣式）**必須被設定**
2、transition-duration（過渡屬性的持續時間）
4、transition-timing-function（過渡運動曲線）
1.animation-name (規定@keyframes動畫的名稱)
4.animation-timing-function（動畫的速度曲線）
5.animation-play-state（動畫狀態改變）
6.animation-fill-mode（動畫結束停留位置）
7.animation-iteration-coun（播放次數）
8.animation-direction（是否下週期逆向播放）
一、過渡
概念
新增某種效果，可以讓物件實現觸發後，進行樣式的轉換變化。
過渡屬性
1、transition-property（過渡屬性樣式）**必須被設定**
注：單設過渡樣式，觸發瞬間改變
/* transition-property: all | [css1 [...]]; */ transition-property: width, height;
值 描述 none 沒有屬性會獲得過渡效果。 all 所有屬性都將獲得過渡效果。 property 定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。
2、transition-duration（過渡屬性的持續時間）
注：
- 設定過渡時間，觸發改變的時候，會以指定時間持續改變。
- 通常改變0.2-0.3s
- 設定時間的 ‘0’ 可以被省略
transition-duration: <time>; 規定完成過渡效果需要花費的時間（以秒或毫秒計）。 預設值是 0，意味著不會有效果。 transition-duration: .3s;
3、transition-delay （延遲效果執行時間）
transition-delay: <time>; 指定秒或毫秒數之前要等待切換效果開始 transition-delay: 2s;
4、transition-timing-function（過渡運動曲線）
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
值 描述 linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 ease 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 貝賽爾曲線函式，在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。 - 貝塞爾曲線學習。查詢網站
5、transition （整體賦值）
transition: property duration timing-function delay; transition: width 2s;<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>過度</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; /*過度*/ /*持續時間*/ /*來去均具有過度效果*/ transition-duration: .5s; /*延遲時間*/ /*transition-delay: 1s;*/ /*過度屬性: all*/ /*transition-property: width, height;*/ /*過度曲線*/ /*transition-timing-function: linear;*/ /*整體設定*/ /*transition: all .3s .1s linear;*/ transition: .3s cubic-bezier(0,.99,0,.99); } .hover { width: 200px; height: 200px; margin: 0 auto; } /*可以製造第二狀態的處理方式*/ .hover:hover .box { width: 400px; height: 190px; background-color: red; /*去向第二狀態才有過度效果*/ /*transition-duration: .1s;*/ } .box:active { } </style> </head> <body> <!-- 過度:從一個狀態以動畫方式變成另一種狀態的這種變化過程就叫做過度 --> <!-- 過度效果通過hover產生,可以製作一個hover層 --> <!-- hover層處理方式:與顯示層同等區域大小 --> <!-- 同樣可以將顯示層的位置交於hover層處理 --> <div class="hover"> <div class="box"></div> </div> </body> </html>
二、動畫
動畫屬性
1.animation-name (規定@keyframes動畫的名稱)
animation-name: keyframename|none; animation-name:mymove;
值 說明 keyframename 指定要繫結到選擇器的關鍵幀的名稱 none 指定有沒有動畫（可用於覆蓋從級聯的動畫） 2.animation-duration（動畫單週期時間）
animation-duration: time; 指定動畫播放完成花費的時間。預設值為 0，意味著沒有動畫效果。 animation-duration:2s;3.animation-delay（動畫延遲開始時間）
animation-delay: time; 可選。定義動畫開始前等待的時間，以秒或毫秒計。預設值為0 animation-delay:2s;4.animation-timing-function（動畫的速度曲線）
/* animation-timing-function: value;*/ /* 標準語法 */ #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} #div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);} #div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);} #div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);} #div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);} #div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
值 描述 linear 動畫從頭到尾的速度是相同的。 ease 預設。動畫以低速開始，然後加快，在結束前變慢。 ease-in 動畫以低速開始。 ease-out 動畫以低速結束。 ease-in-out 動畫以低速開始和結束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值。 5.animation-play-state（動畫狀態改變）
/* animation-play-state: paused|running;*/ paused:指定暫停動畫 running：指定正在執行的動畫6.animation-fill-mode（動畫結束停留位置）
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
值 描述 none 預設值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。 forwards（終點） 在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。 backwards（起點） 動畫將應用在 animation-delay 定義期間啟動動畫的第一次迭代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 "normal" 或 "alternate" 時）或 to 關鍵幀中的值（當 animation-direction 為 "reverse" 或 "alternate-reverse" 時）。 both 動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴充套件動畫屬性。 initial 設定該屬性為它的預設值。 inherit 從父元素繼承該屬性。 7.animation-iteration-coun（播放次數）
animation-iteration-count: value; <count>：一個數字，定義應該播放多少次動畫 infinite：指定動畫應該播放無限次（永遠）
8.animation-direction（是否下週期逆向播放）
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
值 描述 normal 預設值。動畫按正常播放。 reverse 動畫反向播放。 alternate 動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。 alternate-reverse 動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。 initial 設定該屬性為它的預設值。 inherit 從父元素繼承該屬性。 動畫體
/*動畫屬性設定給指定選擇器標籤，動畫體在樣式中單獨設定*/ @keyframes <name>{ /*from未寫任何屬性設定時，預設全部取初始值（初始狀態）*/ from{} to{} } @keyframes <name>{ 0% {} ... 100% {} }<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>動畫</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*動畫樣式*/ .box { /*繫結動畫名*/ animation-name: wasai; /*持續時間*/ animation-duration: 1s; /*延遲時間*/ /*animation-delay: .1s;*/ /*動畫結束停留位置:backwards起點 forwards終點*/ /*animation-fill-mode: forwards;*/ /*運動次數 infinite無數次*/ animation-iteration-count: 4; /*多次運動方向的規則*/ /*alternate:來回*/ /*alternate-reverse:終點開始來回*/ /*animation-direction: alternate-reverse;*/quotes: ; /*動畫狀態 running*/ /*animation-play-state: paused;*/ /*整體設定*/ animation: wasai 1s 2 linear alternate; } .box:hover { animation-play-state: running; } /*動畫體*/ @keyframes wasai{ 0% {} 100% {width: 400px;} } @keyframes wasai1{ 0% {} 100% {} } @keyframes wasai2{ 0% {} 100% {} } </style> </head> <body> <div class="box"></div> </body> </html>