css3動畫transition && animation

css 動畫：transition（過渡）

由於有些屬性動畫無心義，因此可動畫屬性集是一個有限集合

其屬性爲以下幾部分：

• transition-property：指定哪一個或哪些 CSS 屬性用於過渡
• transition-duration：指定過渡的時長。或者爲全部屬性指定一個值，或者指定多個值，爲每一個屬性指定不一樣的時長

• transition-timing-function：指定一個函數(根據四個點肯定一個bezier曲線)，定義屬性值怎麼變化，值；也能夠從 Easing Functions Cheat Sheet 選擇緩動效果

  • bezier 曲線定義能夠具體看MDN上的timing functions

  • cubic-bezier 又稱三次貝塞爾，主要是爲 animation 生成速度曲線的函數，規定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。

    • P0：默認值 (0, 0)
    • P1：動態取值 (x1, y1)
    • P2：動態取值 (x2, y2)
    • P3：默認值 (1, 1)

      大概效果圖--p3的座標本應該爲（1，1），這是css默認的（tips：偷不到圖，本身又不想畫）

  • 橫座標（abscissas）範圍必須是[0, 1]，縱座標（ordinate）範圍若是超出[0, 1]，會有彈跳效果--因爲兼容性的問題，這個效果仍是別考慮了
• transition-delay: 指定延遲，即屬性開始變化時與過渡開始發生時之間的時長

在使用過程當中簡寫：transition: <property> <duration> <timing-function> <delay>;

/* 分開寫，能夠不一一對應，如4個property對應一個duration */
.transition {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  /* transition-property: left color width height;
  transition-duration: 1.2s;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 80ms; */
  transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1) 80ms;
  &--move {
    left: 400px;
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    transform: translateY(100px)
  }
}

檢測過渡是否完成，這樣就能夠將css過渡和js動畫結合起來

el.addEventListener("transitionend", updateTransition, true);

因此，全部property指定的屬性，在值發生改變的的時候，都會遵循duration、timing-function、delay等定義的過分效果達到最後一幀的狀態，並保持下來，至於transform，和width等同樣，只是一個改變時能夠觸發transition過渡效果的可動畫屬性集合中的一個屬性，transition，transform基本兼容到ie10。

css 動畫：animation（動畫）

屬性	描述
animation-name	動畫名稱
animation-duration	一個週期的時間(ms \	s)
animation-timing-function	緩衝效果函數
animation-delay	動畫執行前延遲時間(ms \	s)
animation-iteration-count	動畫執行的次數
animation-direction	動畫是否反向播放
animation-fill-mode	動畫執行以前和以後如何給動畫的目標應用樣式（停留在哪一幀）
animation-play-state	動畫暫停/播放(用於js控制動畫object.style.animationPlayState="paused"，default: running)

注：以上順序是簡寫順序

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	動畫名稱
keyframes-selector	定義幀
css-styles	該幀的樣式

一個可控的動畫

<button @click="animationMove">stopAnimation</button>
<div class="animation" ref="animation"></div>

animationMove (): void {
  let stateg = 'paused'
  if (this.$refs.animation.style.animationPlayState === 'paused') {
    state = 'running'
  }
  this.$refs.animation.style.animationPlayState = state
}

.animation {
  position: absolute;
  border-radius: 50%;
  top: 120px;
  animation: move 1.2s ease-in 80ms infinite alternate;
}
@keyframes move {
  0% {
    left: 20px;
    background-color: red;
    width: 40px;
    height: 40px;
    transform: translateY(0)
  }
  100% {
    left: 400px;
    background-color: rgb(169, 185, 214);
    width: 100px;
    height: 100px;
    transform: translateY(100px)
  }
}

動畫和過渡的相同之處應該就是緩衝函數不可變，不一樣之處就是動畫能夠定義多個關鍵幀，過渡只能定義兩個關鍵幀（起始幀和結束幀）

動畫修改一個元素的 width 和 height 會改變它的形狀，並且可能引發頁面上其它元素的移動和形狀改變，這個過程稱爲佈局。基於 CSS 的動畫和原生支持的 Web 動畫一般在稱爲合成器線程的線程上處理，transforms 和 opacity 均可以在合成器線程中處理；它與瀏覽器的主線程不一樣，在該主線程中執行樣式，佈局，繪製和 JavaScript。這意味着若是瀏覽器在主線程上運行一些耗時的任務，這些動畫能夠繼續運行而不會中斷；若是任何動畫出發了繪製，佈局，或者二者，那麼主線程會來完成該工做。這個對基於 CSS 仍是 JavaScript 實現的動畫都同樣，佈局或者繪製的開銷巨大，讓與之關聯的 CSS 或 JavaScript 執行工做、渲染都變得毫無心義；避免使用觸發佈局或繪製的屬性動畫。對於大多數現代瀏覽器，這意味着將動畫（修改的屬性）限制爲 opacity 和 transform；

參考：

• How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance
• MDN:transition
• MDN:animation