關於一些CSS動態效果的整理

僅列出一些常用命令，和常用簡寫：
過渡半秒：transition:.5s
放大縮小：transform:scale(1)
移動效果：translateX(100%)、translateY(100%)、translate(x,y)
旋轉效果：rotate(45deg)

關聯到動畫：

test{animation:donghua infinite}
@keyframes donghua{0%{opacity:0}100%{opacity:1}}

套用多個動畫

test{animation:donghua1 infinite,donghua2 infinite}
@keyframes donghua1{0%{opacity:0}100%{opacity:1}}
@keyframes donghua2{0%{transform:scale(1)}100%{transform:scale(1.1)}}

動畫簡寫

animation: name duration timing-function delay iteration-count direction;

每個屬性的作用：

animation-name：規定需要綁定到選擇器的 keyframe 名稱。。
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function：規定動畫的速度曲線。
animation-delay：規定在動畫開始之前的延遲。
animation-iteration-count：規定動畫應該播放的次數。
animation-direction：規定是否應該輪流反向播放動畫。

一個滾動軸效果：

test{background-image:linear-gradient(45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.5) 75%,transparent 75%,transparent);background-color:#ddd;background-size:20px 20px;animation:gundong 2s linear infinite}
@keyframes gundong{animation:OutlineBorder 2s linear infinite}

這裏的background-image只起到顏色疊加的作用，並非是背景色。需要注意的是background-image中的四個百分比控制背景從上到下四個部分區域，每個區域需要兩個端點去控制，如果每個端點只設置一次顏色，顯示的效果就會是漸變色，如果你不需要漸變色，則必須在每個端點處設置兩次顏色才能達到效果（這個和ps中的漸變色設置方法很像），而且要注意設置顏色的順序，可以這麼去理解：0~25%、25%~50%、50%~75%…這裏的75~100%的部分因爲和背景色同色，所以被省略掉了。45deg表示旋轉45度角。background-color設置背景顏色，transparent表示不設置此處的顏色，也就是透明。background-size控制背景大小。animation用來關聯後邊的動畫效果。