CSS動畫 animation與transition

時間 2019-11-18

標籤 css 動畫 animation transition 欄目 CSS 简体版

原文原文鏈接

1、區分容易混淆的幾個屬性和值

　　先區分一下css中的幾個屬性：animation（動畫）、transition（過渡）、transform（變形）、translate（移動）。css

　　CSS3中的transform(變形)屬性用於內聯元素和塊級元素，能夠旋轉、扭曲、縮放、移動元素，它的屬性值有如下五個：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix；html

　　transform(變形)是CSS3中的元素的屬性，而translate只是transform的一個屬性值；transform是transition（過渡動畫）的transition-property的一個屬性值。　　　　transform文章連接CSS3中transform幾個屬性值的注意點css3

　　animation（動畫）、transition（過渡）是css3中的兩種動畫屬性。animation強調流程與控制，對元素的一個或多個屬性的變化進行控制，能夠有多個關鍵幀（animation 和@ keyframes結合使用）；web

　　transition強調過渡，是元素的一個或多個屬性發生變化時產生的過渡效果，同一個元素經過兩個不一樣的途徑獲取樣式，而第二個途徑當某種改變發生（例如hover）時才能獲取樣式，這樣就會產生過渡動瀏覽器

畫。可以認爲它有兩個關鍵幀（Transition ＋ Transform ＝兩個關鍵幀的Animation）。函數

transition示例：工具

(1)#box1，產生雙邊過渡效果post

#box1在hover後有兩個屬性改變了，改變前和改變後的屬性值分別是:動畫

　　改變前：網站

　　background: green;

  　　 transform:rotate(0deg);//這個可視爲默認狀態，即旋轉度爲0

　改變後：

　　　　background: red;

　　　　transform:rotate(180deg);

而且在#box1中設置了過渡動畫 transition: background 2s ease,transform 2s ease-in 1s; 可知在background和transform屬性變化時會產生動畫效果，而這種效果的產生有兩種途徑：

一種是從默認到hover觸發了過渡效果； 一種是從hover回到默認這兩種屬性也變化了，所以也產生了過渡效果。

　　注意點：這其中包括兩個方向上的，當鼠標在div上懸停，div的樣式從原始樣式過渡到div：hover的樣式；當鼠標離開div，樣式又從div：hover過渡到div默認樣式。這兩個方向上的過渡都是平滑不突兀的

 1     <style>
 2         #box1 {
 3             height: 100px;
 4             width: 100px;
 5             background: green;
 6             transition: background 2s ease,transform 2s ease-in 1s;
 7         }
 8         #box1:hover{transform:rotate(180deg) scale(.5,.5);background:red;}
 9     </style>
10 
11 <body>
12  <div id="box1">BOX1</div>
13 </body>

（2）#box2 產生單邊過渡效果

什麼狀況下只會產生單邊過渡效果呢，看下面的例子，與#box1同樣，#box2也有相同的兩個屬性發生了改變：

　　改變前：

　　　　background: blue;

  　　 transform:rotate(0deg);//這個可視爲默認狀態，即旋轉度爲0

　改變後：

　　　　background: red;

　　　　transform:rotate(180deg);

可是與#box1不一樣的是，#box2將過渡動畫 transition放在了 #box2:hover中進行設置。這樣狀況下：只有在鼠標懸停時，纔會觸發過渡動畫，過渡平滑；而鼠標離開時，不會產生過渡動畫，background、transform將會生硬的回到最初的屬性值上。

注意點：這個例子中的過渡動畫是單一方向上的。當鼠標在div上懸停，div的樣式從原始樣式過渡到div：hover的樣式；當鼠標離開div，樣式會從div：hover的樣式回到原始樣式，但不是過渡動畫的方式，而是直接回到原始樣式，看上去比較突兀和生硬。

 1   <style>     
 2    #box2{
 3             height: 100px;
 4             width: 100px;
 5             background: blue;
 6         }
 7         #box2:hover{
 8             transform: rotate(180deg) scale(.5, .5);
 9             background: red;
10             transition: background 2s ease, transform 2s ease-in 1s;}
11     </style>
12 </head>
13 <body>
14  <div id="box1">BOX1</div>
15  <div id="box2">BOX2</div>
16 </body>

2、transition

一、語法

　　transition是一個複合屬性，可設置四個過渡屬性，簡寫方式以下：

transition{ transition-property transition-duration transition-timing-function transition-delay}

　　transition-property：是用來指定當元素其中一個屬性改變時執行transition效果，值有none（沒有屬性改變）、all（默認值，全部屬性改變），indent（某個屬性名，一條transition規則，只能定義

一個屬性的變化，不能涉及多個屬性，若是要設置多個屬性時，需分別設置，中間以逗號隔開）【當其值爲none時，transition立刻中止執行，當指定爲all時，則元素產生任何屬性值變化時都將執行transition效

果】。 連接：　 c ss 中的可以產生動畫的屬性列表（transition動畫和animation動畫適用）

　　transition-duration ：過渡時間，是用來指定元素轉換過程的持續時間，單位爲s（秒）或ms（毫秒）

　　transition-timing-function：時間函數，容許你根據時間的推動去改變屬性值的變換速率，值ease（逐漸變慢）、linear（勻速）、ease-in(加速) 、ease-out（減速）、ease-in-out：（加速

而後減速）、cubic-bezier：（該值容許你去自定義一個時間曲線） 貝塞爾曲線掃盲工具網站

　　transition-delay：延遲，指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行transition效果，單位爲s（秒）或ms（毫秒）

2 、觸發方式

　　僞類觸發：:hover : focus :checked :active

　　js觸發：toggleClass

三、如下狀況下，屬性值改變不能產生過渡效果

background-image，如url(a.jpg)到url(b.jpg)（與瀏覽器支持相關，有的瀏覽器不支持）等，瀏覽器支持狀況
float浮動元素
height或width使用auto值
display屬性在none和其餘值（block、inline-block、inline）之間變換
position在stativ和absolute之間變換

四、transition屬性瀏覽器兼容狀況

3、animation

　　animation屬性結合@ keyframes使用， animation中的animation-name須要設置成@ keyframes的name一致。

animation示例

 1     <style>
 2         .box{height:100px;width:100px;border:15px solid black;
 3             animation: changebox 10s ease-in-out   3 alternate paused;
 4             }
 5         .box:hover{
 6             animation-play-state: running;
 7         }
 8         @keyframes changebox {
 9             10% {  background:red;  }
10             50% {  width:80px;  }
11             70% {  border:15px solid yellow;  }
12             100% {  width:180px;  height:180px;  }
13         }
14     </style>
15 
16 <body>
17  <div class="box"></div>
18 </body>

一、@keyframes關鍵幀

1 @keyframes changebox {
2             10% {  background:red;  }
3             50% {  width:80px;  }
4             70% {  border:15px solid yellow;  }
5             100% {  width:180px;  height:180px;  }
6         }

　　設置方法如上，其中0%和100%還可使用關鍵詞from和to來表明，大括號中設置不一樣時間段的樣式規則。

　　如上示例中，animation中設置animation-duration的值是10s，並經過animation-name爲changebox引入@keyframes changebox中的樣式，表示在10秒內執行動畫，動畫執行過程我的理解以下：

序號	執行時間（共10s） animation-duration：10s	執行動畫	對應@keyframes changebox中的規則
1	0~1s	背景色由默認變爲紅色	10%{ background:red; }
2	0~5s	寬度由原始設定的100px變爲80px(並非1~5s之間執行）	50% { width:80px; }
3	0~7s	邊框由原始設定的無變爲border:15px solid yellow;	70% { border:15px solid yellow; }
4	5~10s	寬度由在5s時的80px變爲180px	100%{ width:180px;height:180px; }
5	0~10s	高度原始設定的100px變爲180px	100%{ width:180px;height:180px; }

　　特別注意的是：每個百分號後面的樣式變化都是從0s開始的，除非有兩個百分比設置了同一個樣式的變化（上方的例子，50% { width:80px; } 100%{width:150px;}，那麼寬度的總體狀況會是0~5s中寬

度由原始值變爲80px；5~10s間，寬度由80px變爲180px；），我的理解，在這個過程當中，不是一個動畫，而是多個小動畫（本身起的名字，方便後面區分animation）按照設定好的百分比對應的時間正好執行完成結

同一時間內有可能有多個小動畫同時在執行，也有可能只有一個小動畫在執行。

二、animation語法

　　設置好了關鍵幀，就能夠設置animation屬性了，animation也是一個符合屬性，能夠簡寫，語法以下：

animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}

　　animation-name：用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致

　　animation-duration ：指定元素播放動畫所持續的時間

　　animatino-timing-function ：和transition中的transition-timing-function 中的值同樣。根據上面@keframes中分析的animation中可能存在多個小動畫，所以這裏的值設置是針對每個小動畫所在時間範圍內的屬性變換速率。

　　animation-delay：定義在瀏覽器開始執行動畫以前等待的時間，這裏是指整個animation執行以前的等待時間，而不是上面說的多個小動畫

　　animation-iteration-count：定義動畫的播放次數，其一般爲整數，默認是1,；取值爲infinite，動畫將無限次的播放。

　　animation-direction：主要用來設置動畫播放方向，其主要有兩個值：

- - normal 默認值，若是設置爲normal時，動畫每次循環都是向前（即按順序）播放
  - alternate（輪流），動畫播放在第偶數次向前播放，第奇數次向反方向播放（animation-iteration-count取值大於1時設置有效）

　　animtion-play-state：屬性是用來控制元素動畫的播放狀態。其主要有兩個值：

- - running，能夠經過該值將暫停的動畫從新播放，這裏的從新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放。
  - paused，暫停播放

注意：使用animtion-play-state屬性，當元素動畫結束後，元素的樣式將回到最原始設置狀態（這也是爲何要引入animation-fill-mode屬性的緣由）

　animation-fill-mod：　默認狀況下，動畫結束後，元素的樣式將回到起始狀態，animation-fill-mode屬性能夠控制動畫結束後元素的樣式。主要具備四個屬性值：

- - none（默認，回到動畫沒開始時的狀態。）
  - forwards（動畫結束後動畫停留在結束狀態）
  - backwords（動畫回到第一幀的狀態）
  - both（根據animation-direction輪流應用forwards和backwards規則）。

三、animation屬性瀏覽器兼容狀況

相關標籤/搜索

android.support.v4.animation

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。