css3學習--css3動畫詳解一(animation屬性）

時間 2019-12-08

標籤 css3 css 學習動畫詳解 animation 屬性欄目 CSS 简体版

原文原文鏈接

***介紹的屬性並不徹底，寫的都是我認爲容易混淆的難點屬性，因此屬性會在最後綜合案例展現~

一.Keyframes介紹：

Keyframes被稱爲關鍵幀，其相似於Flash中的關鍵幀。在CSS3中其主要以「@keyframes」開頭，後面緊跟着是動畫名稱加上一對花括號「{…}」，括號中就是一些不一樣時間段樣式規則。css

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}
示例：建立一個動畫名叫「changecolor」，在「0%」時背景色爲red,在20%時背景色爲blue，在40%背景色爲orange，在60%背景色爲green，在80%時背景色yellow，在100%處時背景色爲red。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>css3動畫</title>
<style>
@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}
</style>
</head> 
<body>
<div>hover顏色改變</div>

</body>
</html>

　　二.設置動畫播放方式html

語法規則：css3

animation-timing-function:ease(由快到慢，逐漸變慢) | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

三.設置動畫播放方向

animation-direction屬性主要用來設置動畫播放方向，其語法規則以下：css3動畫

animation-direction:normal | alternate [, normal | alternate]*

其主要有兩個值：normal、alternate動畫

一、normal是默認值，若是設置爲normal時，動畫的每次循環都是向前播放；spa

二、另外一個值是alternate，他的做用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。code

四.設置動畫的播放狀態

animation-play-state屬性主要用來控制元素動畫的播放狀態。orm

參數：htm

其主要有兩個值：running和paused。blog

其中running是其默認值，主要做用就是相似於音樂播放器同樣，能夠經過paused將正在播放的動畫停下來，也能夠經過running將暫停的動畫從新播放，這裏的從新播放不必定是從元素動畫的開始播放，而是從暫停的那個位置開始播放。另外若是暫停了動畫的播放，元素的樣式將回到最原始設置狀態。

例如，頁面加載時，動畫不播放。代碼以下：

animation-play-state:paused;

五.設置動畫時間外屬性

animation-fill-mode屬性定義在動畫開始以前和結束以後發生的操做。主要具備四個屬性值：none、forwards、backwords和both。其四個屬性值對應效果以下：

屬性值	效果
none	默認值，表示動畫將按預期進行和結束，在動畫完成其最後一幀時，動畫會反轉到初始幀處
forwards	表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards	會在向元素應用動畫樣式時迅速應用動畫的初始幀
both	元素動畫同時具備forwards和backwards效果