推薦一個自定義動畫效果的網站： css3 Keyframes
Transition
語法：
transition: property duration timing-function delay;
定義和用法
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
transition-property 規定設置過渡效果的 CSS 屬性的名稱。
transition-duration 規定完成過渡效果需要多少秒或毫秒。
transition-timing-function 規定速度效果的速度曲線。
transition-delay 定義過渡效果何時開始。
註釋：請始終設置 transition-duration屬性，否則時長爲 0，就不會產生過渡效果。
transition-property
如果你想讓狀態只在某一個屬性上延遲，比如height，我們就可以這樣寫：transition: 1s height;
transition-duration
在CSS3引入transition之前，所有的狀態變化都是瞬間完成的，可以看個例子transition.html。如果給狀態變化指定
transition: 1s; // 延遲到1s完成
transition-delay
transition: 1s height, 1s width;
如果想讓height先發生變化結束以後，再讓width發生變化。可以爲width指定一個delay參數。
transition: 1s height, 1s 1s width;
transition-timing-function
但是，狀態的變化速度，默認不是勻速的，而是逐漸放慢(ease)。
transition: 1s ease;
除了ease以外，還有其他模式：
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：和ease類似，但比ease幅度大（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier函數：自定義速度模式。可能的值是 0 至 1 之間的數值。
transition
以上各個屬性可以簡寫爲：transition: 1s 1s height ease;
需要注意的是各個屬性的順序可以更改，
但是transition-duration和transition-delay這兩個屬性之間的順序必須是一前一後。
總結
目前，各大瀏覽器（包括IE 10）都已經支持無前綴的transition，所以transition已經可以很安全地不加瀏覽器前綴。
不是所有的CSS屬性都支持transition。
transition需要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。比如，height從0px變化到100px，transition可以算出中間狀態。但是，transition沒法算出0px到auto的中間狀態，也就是說，如果開始或結束的設置是height: auto，那麼就不會產生動畫效果。類似的情況還有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
transition需要事件觸發，所以沒法在網頁加載時自動發生。
transition是一次性的，不能重複發生，除非一再觸發。
一條transition規則，只能定義一個屬性的變化，不能涉及多個屬性。
animation就是爲了解決這些問題而提出的。 transition也經常結合transform來使用。
Transfrom
Transform字面上就是變形，改變的意思。
在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix
語法：
transform ： none | <transform-function> [ <transform-function> ]*
也就是：
transform: rotate | scale | skew | translate |matrix;
一、旋轉rotate
rotate(<angle>) ：通過指定的角度參數對原元素指定一個2D rotation（2D 旋轉），
需先有transform-origin屬性的定義。
transform-origin定義的是旋轉的基點，
其中angle是指旋轉角度，如果設置的值爲正數表示順時針旋轉，
如果設置的值爲負數，則表示逆時針旋轉。
如：transform:rotate(30deg):
二、移動translate
移動translate我們分爲三種情況：
translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；
translateX(x)僅水平方向移動（X軸移動）；
translateY(Y)僅垂直方向移動（Y軸移動），
具體使用方法如下：
1、translate(<translation-value>[, <translation-value>]) ：
通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數，
ty 是第二個過渡值參數選項。如果 未被提供，則ty以 0 作爲其值。也就是translate(x,y),
它表示對象進行平移，按照設定的x,y參數值,當值爲負數時，反方向移動物體，其基點默認爲元素 中心點，
也可以根據transform-origin進行改變基點。
如 transform:translate(100px,20px):
transform:translateX(100px):
transform:translateY(20px):
const btn = document.querySelector('.btn')
btn.addEventListener('click', function() {
const ball = document.querySelector('.ball')
ball.style.transform = 'translate(120px, 0px)'
ball.style.transition = '1s'
})
自動刷新
window.onload = function () {
const ball = document.querySelector('.ball')
ball.style.transform = 'translate(120px, 0px)'
ball.style.transition = '1s'
}
// 怎麼實現僞GPU渲染 （顯卡渲染）
//transform:translate3D(x, y, z)
// 如何實現真正的GPU渲染
// will-change:
// auto: 沒有添加
// 自定義屬性： 支持的屬性 transform top left bot right
// opacity
//will-change: top;
三、縮放scale
1、scale(<number>[, <number>])：提供執行[sx,sy]縮放矢量的兩個參數指定一個2D scale（2D縮放）。
如果第二個參數未提供，則取與第一個參數一樣的值。
scale(X,Y)是用於對元素進行縮放，可以通過transform-origin對元素的基點進行設置，同樣基點在元素中心位置；
基中X表示水平方向縮放的倍數，Y表示垂直方向的縮放倍數，而Y是一個可選參數，如果沒有設置Y值，
則表示X，Y兩個方向的縮放倍數是一樣的。並以X爲準。
如：
transform:scale(2,1.5):
transform:scaleX(2):
transform:scaleY(2):
四、扭曲skew
1、skew(<angle> [, <angle>]) ：
X軸Y軸上的skew transformation（斜切變換）。
第一個參數對應X軸，第二個參數對應Y軸。
如果第二個參數未提供，則值爲0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，
第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。
其中第二個參數是可選參數，如果沒有設置第二個參數，那麼Y軸爲0deg。
同樣是以元素中心爲基點，我們也可以通過transform-origin來改變元素的基點位置。
如：
transform:skew(30deg,10deg):
transform:skewX(30deg)
transform:skewY（10deg）
五、矩陣matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>) ：
以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，
相當於直接應用一個[a b c d e f]變換矩陣。
就是基於水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣，
ransform-origin(X,Y):用來設置元素的運動的基點（參照點）。
默認點是元素的中心點。其中X和Y的值可以是百分值,em,px，
其中X也可以是字符參數值left,center,right；Y和X一樣除了百分值外還可以設置字符值top,center,bottom，
這個看上去有點像我們background-position設置一樣
transform-origin:(left,top):
transform-origin:right
transform-origin(25%,75%)
Animation
語法
@keyframes keyframes - name {
[[from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}
keyframes-name
幀列表的名稱。 名稱必須符合 CSS 語法中對標識符的定義。
from
等效於 0%.
to
等效於 100%
例如：
@keyframes dropdown {
0% { top: 0; left:0px;}
30% { top: 300px; left:0px;}
50% { top: 150px; left:0px;}
70% { top: 300px; left:0px;}
80% { top: 0px; left:-200px;}
100% { top: 0px; left:0px;}
}
簡寫屬性形式:
animation:
[animation-name] [animation-duration] // 動畫的名稱、持續時間
[animation-timing-function][animation-delay] // 關於時間的函數(properties/t)、延遲時間
[animation-iteration-count] [animation-direction] // 播放次數、播放順序
[animation-fill-mode] [animation-play-state]; // 播放前或停止後設置相應樣式、控制動畫運行或暫停
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1. animation-name：指定要綁定到選擇器的關鍵幀的名稱
keyframename 指定要綁定到選擇器的關鍵幀的名稱
none 指定有沒有動畫（可用於覆蓋從級聯的動畫）
例： animation-name: keyframename|none;
2. animation-timing-function： 屬性定義了動畫的播放速度曲線
ease、
ease-in、
ease-out、
ease-in-out、
linear、
cubic-bezier(number, number, number, number)
默認值，如果沒有顯示寫調用的函數，則默認爲ease。
3. animation-direction： 動畫方向
animation-direction: normal 正序播放
animation-direction: reverse 倒序播放
animation-direction: alternate 交替播放
animation-direction: alternate-reverse 反向交替播放
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
4. animation-delay： 動畫延遲
animation-delay屬性定義動畫是從何時開始播放，
即動畫應用在元素上的到動畫開始的這段時間的長度。
默認值0s，表示動畫在該元素上後立即開始執行。
該值以秒(s)或者毫秒(ms)爲單位。
5. animation-fill-mode: 動畫填充模式 (是指給定動畫播放前後應用元素的樣式。)
animation-fill-mode: none 動畫執行前後不改變任何樣式
animation-fill-mode: forwards 保持目標動畫最後一幀的樣式
animation-fill-mode: backwards 保持目標動畫第一幀的樣式
animation-fill-mode: both 動畫將會執行 forwards 和 backwards 執行的動作。
6. animation-timing-functio: 動畫播放狀態(定義動畫是否運行或者暫停。可以確定查詢它來確定動畫是否運行。)
默認值爲running
running 動畫正常播放
paused 動畫暫停播放
transition和transform屬性的區別
transition，過渡；
transform，2D/3D轉換。
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：
transition-property
transition-duration
transition-timing-function
transition-delay
所以，transition在設置transition-duration屬性的情況下，會產生過渡效果。
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
所以，transform屬性只對元素進行變換，不會產生過渡效果。
w3c網站實例：
http://www.w3school.com.cn/tiy/t.asp?f=css3_image_gallery
a標籤的4種狀態
a:link 普通的、未被訪問的鏈接
a:visited 用戶已訪問的鏈接
a:hover 鼠標指針位於鏈接的上方
a:active 鏈接被點擊的時刻