css3 動畫屬性詳解
下面的是我的筆記
1、transition： 平衡過渡
transition ：過渡效果的 CSS 屬性的名稱 完成過渡效果需要多少秒或毫秒 速度效果的速度曲線 過渡效果何時開始
1）過渡效果的 CSS 屬性的名稱（一般有）：all、no、 width、height
2）速度效果的速度曲線（動畫的速度曲線）：
| 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 | 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。 |
2、animation： 動畫
一般通過@keyframes 規則，建立動畫。 在動畫過程中，您能夠多次改變這套 CSS 樣式。以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。0% 是動畫的開始時間，100% 動畫的結束時間。
例子：
animation: mymove 開始時間 動畫的速度曲線 延遲 重複次數 是否應該輪流反向播放動畫
@keyframes mymove { 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }
3、transform： 改變元素的大小、位置
注意：粉紅色為圖形原來的樣子，大紅色為變化後的樣子
1) translate:移動
| translate(x,y) | 定義 2D 轉換。 |
| translate3d(x,y,z) | 定義 3D 轉換。 |
| translateX(x) | 定義轉換，只是用 X 軸的值。 |
| translateY(y) | 定義轉換，只是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉換，只是用 Z 軸的值。 |
2) rotate：旋轉
旋轉的時候，可以給旋轉的模組設定一個原點 (下圖的圓心為設定的原點，模組內的點為原始的原點)
transform-origin: x , y;
3) scale：放縮
4) skew：扭曲（傾斜）
5) matrix:矩陣，一般用來變換前面四種沒有的效果，也可以實現前面四種效果
請看：Matrix詳解
4、動畫技巧：
1、animation-delay：設定為負值
animation-delay：定義動畫何時開始
| 預設為0 | 立即執行動畫 |
| 正值 | 延遲指定時間後執行動畫 |
| 負值 | 立即執行，但跳過指定時間後進入動畫（比如取值 -1，即是跳過動畫執行的一秒，從 00:01 開始執行動畫） |
例子：
1）效果圖 ：動畫延遲
2）程式碼：animation-delay
2、設定border的顏色
邊框分為4部分
border-left-color、border-top-color、border-right-color、border-bottom-color
例子：
1）效果圖：邊框顏色
2）程式碼：border-left+animation+transform
3、設定border的寬度
border-left-width、border-top-width、border-right-width、border-bottom-width
例子：
1）效果圖：折角效果圖
2）程式碼：折角效果