css過分與動畫

緩動效果

回彈動畫效果是比較常見的動畫，好比小球的運動、對於尺寸變化和角度變化使用回彈效果能夠加強動畫的體驗。小面介紹一些簡單的緩動效果的動畫。

• 彈跳動畫的實現

css中全部過渡和動畫都是跟一條曲線（緩動曲線）有關的，這條曲線指定了動畫過程在整段時間中是如何推動的。

在animationtiming-function/transition-timing-function 展開式屬性中，均可以把這個默認的調速函數顯式指定爲ease 關鍵字。ease也是默認值，四種指定的緩動曲線值分別是ease、ease-in、ease-out(是ease-in 是反向版本)、ease-in-out、linear，四種的緩動曲線分別以下圖所示：

使用ease-in和ease-out這對相反的版本能夠實現回彈的效果
如小球的回彈效果能夠這樣實現：

@keyframes bounce {
  60%, 80%, to {
    transform: translateY(400px);
    animation-timing-function: ease;
  }
  70% {
    transform: translateY(300px);
  }
  90% {
    transform: translateY(360px);
  }
}

.ball {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: yellow;
    animation: bounce 3s ease-in;
}

CSS 的調速函數都是隻有一個片段的貝塞爾曲線，所以每一個調速函數只有兩個控制錨點。同時CSS 提供了一個cubic-bezier(x1, y1, x2, y2)函數，容許咱們指定自定義的調速函數。它接受四個參數，分別表明兩個控制錨點的座標值，若是想獲得任何調速函數的反向版本，只要把控制錨點的水平座標和垂直座標互換就能夠。

把上面的ball的animation，設置成 bounce 3s cubic-bezier(.1,.25,1,.25);會使回彈效果更真實。

一個好用的貝塞尓可視化的工具

• 彈性過渡

彈性過渡的應用場景好比說是一個input框，用戶輸入的時候給予一個提示框，能夠應用上面的cubic-bezier實現

<label>
      Your username: <input id="username" />
      <span class="callout1">
        Only letters, numbers,
        underscores (_) and hyphens (-) allowed!
      </span>
</label>

input:not(:focus) + .callout1 {
    transform: scale(0);
    transition: .25s;
  }
.callout1 {
    /* cubic-bezier(.5s * 50%, .1, .5 * 60%, 1.5) */
    transition: .5s cubic-bezier(.25, .1, .3, 1.5);
    transform-origin: 1.4em -.4em;
    /* CSS transform 屬性 , 只對 block 級元素生效*/
    display: block;
    width: 250px;
    height: 40px;
    font-size: 12px;
    border: 1px solid #eee;
    margin-top: 5px;
}

實現效果

在使用transition進行過渡時，在不指定transition-property屬性時，它會自動讀取它的初始值all，這時全部能作過渡的屬性都會參與過渡，好比color。因此在設置過渡時，要把過渡的做用範圍限制在某幾種特定的屬性上。

綜上，上面的代碼transition的值都應該加上transform，即

input:not(:focus) + .callout {
    transform: scale(0);
    transition: .25s transform;
}
.callout {
    transform-origin: 1.4em -.4em;
    transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
}

逐幀動畫

在實現一個卡通影片或者一個複雜的進度指示框，或者loading的標誌時這種場景比較適應逐幀動畫。

在實現loading動畫時也是可使用gif動畫的，可是gif動畫是有一些本身的缺點的：

1. GIF 圖片的所能使用的顏色數量被限制在 256 色

2. GIF 不具有 Alpha 透明的特性。

3. 修改動畫的參數不方便，須要從新編輯生成。

在css中可使用step這個函數實現。
全部基於貝塞爾曲線的調速函數都會在關鍵幀之間進行插值運算，從而產平生滑的過渡效果。這種平滑特性不適用於逐幀動畫的實現。

steps() 會根據你指定的步進數量，把整個動畫切分爲多幀，並且整個動畫會在幀與幀之間硬切，不會作任何插值處理。這種loading的實現正適用於這種

具體實現以下：

<div class="loader">Loading...</div>

@keyframes loader {
    to { background-position: -800px 0; }
}

.loader {
    width: 100px; 
    height: 100px;
    background: url(img/loader.png) 0 0;
    animation: loader 1s infinite steps(8);
    
    /* 把文本隱藏起來 */
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
}

loader.png 是一個將全部 loading 狀態拼接好的 png 圖片

閃爍效果的實現

之前的blink標籤能夠用來實現文字的閃爍效果，如今沒有了，如今能夠經過animation建立的動畫實現

@keyframes blink {
  50% {
    color: transparent
  }
}

.highlight {
  animation: 1s blink 3 steps(1);
}

打字動畫的實現

實現思路就是讓容器的寬度成爲動畫的主體，把全部文本包裹在這個容器中，而後讓它的寬度從0 開始以步進動畫的方式、一個字一個字地擴張到它應有的寬度。只適用於單行的文本

實現中將使用ch這個單位，它表示0字符的寬度，不多用到，但對於等寬字體來講，「0」字符的寬度和其餘全部字形的寬度是同樣的。假設咱們要實現的文本是等寬字體。

<h1 class="code">CSS is awesome!</h1>

@keyframes typing {
  from {
    width: 0
  }
}

/* 閃爍的光標的實現 */
@keyframes caret {
  50% {
    /* currentColor使邊框顏色自動與文字顏色保持一致 */
    border-color: currentColor;
  }
}

.code {
  width: 15ch; /* 文本的寬度 */
  animation: typing 6s steps(15),
  caret 1s steps(1) infinite;
  white-space: nowrap;
  border-right: .05em solid transparent;
  overflow: hidden;
}

效果：

狀態平滑的動畫

應用場景是在一張圖片很長，展現的位置又頗有限，這時候作成動畫是再好不過的，在鼠標hover或者focus的觸發動畫的發生。可是當動畫開始播放還沒結束的時候，鼠標離開時，動畫就會特別生硬的回到圖片的最開始的位置上，解決的辦法就是使用animation-play-state這個屬性

@keyframes panoramic {
  to {
    background-position: 100% 0;
  }
}

.panoramic {
  width: 150px;
  height: 150px;
  background: url("timg.jpeg");
  background-size: auto 100%;
  animation: panoramic 10s linear infinite alternate;
  animation-play-state: paused;
}

.panoramic:hover, .panoramic:focus {
  animation-play-state: running;
}

效果：

沿環形路徑平移的動畫

經過設置旋轉的動畫達到效果，可是會存在一個問題旋轉的時候圖片自身也會一塊兒旋轉，解決這個問題有兩種方法：

（1）須要兩個元素的解決方案
思路就是給元素設置另外一個旋轉動畫，讓它以相反的方向自轉一週，這樣旋轉的時候圖片自身就不會跟着旋轉

<div class="path">
    <div class="avatar">
        <img src="lea.jpg" />
    </div>
</div>

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

.path .avatar {
  animation: spin 10s infinite linear;
  transform-origin: 50% 150px; /* 150px = 路徑的半徑 */
}

.path .avatar > img {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  position: absolute;
  left: 120px;
  top: 10px;
  animation: inherit;
  /* reverse 獲得原始動畫的反向版本 */
  animation-direction: reverse;
}

效果以下：

(2) 單個元素的解決方案
每一個transform-origin 都是能夠被兩個translate() 模擬出來的。
例如

transform: rotate(30deg);
transform-origin: 200px 300px;


transform: translate(200px, 300px)
rotate(30deg)
translate(-200px, -300px);
transform-origin: 0 0;

/* 以上兩段代碼等價 */

應用translate變形函數並非彼此獨立的，每一個變形函數並非只對這個元素進行變形，並且會把整個元素的座標系統進行變形，從而影響全部後續的變形操做。這也說明了爲何變形函數的順序是很重要的，變形屬性中不一樣函數的順序若是被打亂，可能會產生徹底不一樣的結果。

經過translate的方式就能夠只用一層dom

@keyframes spin {
  from {
    transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);
  }
}

.avatar {
  animation: spin 3s infinite linear;
}