CSS3動畫

transition過渡

transition-property : 規定設置過渡效果的CSS屬性的名稱。
transition-property:width ,height;
all表示全部的屬性，默認值

transition-duration : 規定完成過渡效果須要多少秒或毫秒。
transition-duration
須要加時間單位是 s秒 ms毫秒 1s ===1000ms
​
transition-delay :1s; 定義過渡效果什麼時候開始。
transition-delay:2s;延時的效果
transition-delay:-2s;延時的效果
​
transition-timing-function : 規定速度效果的速度曲線。
linear-----------------勻速
ease（默認值）-----------------逐漸慢下來
ease-in-----------------加速
ease-out-----------------減速
ease-in-out-----------------先加速後減速
cubic-bezier----------------（ http://cubic-bezier.com ）

複合寫法：
transition:all 2s linear
transition:2s linear all
transition:2s all linear
注意:當總時間與延遲時間同時存在的時候，就有順序了，第一個是總時間，第二個是延遲時間。
transition:2s 3s linear all

transform變形

translate   : 位移
transform:translate(x,y);
transform:translateX(100PX);
transform:translateY(100PX);
transform:translateZ(100PX);

scale: 縮放
transform:scale(num);
num是倍數，正常爲1.
transform:scale(num1，num2);
兩個值，分別表明w h
transform:scaleX(num);只針對寬
transform:scaleY(num);只針對高
transform:scaleZ(num);

rotate     : 旋轉
transform: rotate(num) num是旋轉的角度30deg
正值：順時針旋轉
負值：逆時針旋轉
表示一個角：角度deg 或 弧度rad
注 : rotate()跟rotateZ()是等價關係。
rotateX(3D)
rotateY(3D)
rotateZ(2D)

skew : 斜切
transform:skew( num1,num2):num1 和num2都是角度，針對的是x和y
transform : skewX( )
transform : skewY( )
注: skew沒有3d寫法。
注：設置多個值時候的順序；先執行後面的，在執行前面的
位移會受到後面要執行的縮放、旋轉和斜切的影響。
注：全部的變形不會影響其餘元素，相似於相對定位。
注:變形操做對inline(內聯元素)不起做用的。

tranform-origin 基點位置
主要是針對旋轉和縮放，默認都是中心點爲基點。
設置transform-origin的基點位置。

animation動畫

原理：逐幀動畫。會把整個運動過程，劃分爲100份。

animation-name : 設置動畫的名字 (自定義的)
animation-duration : 動畫的持續時間
animation-delay : 動畫的延遲時間
animation-iteration-count : 動畫的重複次數 ，默認值就是1 ， infinite無限次數
animation-timing-function : 動畫的運動形式
linear-----------------勻速
ease（默認值）-----------------逐漸慢下來
ease-in-----------------加速
ease-out-----------------減速
ease-in-out-----------------先加速後減速
cubic-bezier----------------（ http://cubic-bezier.com ）

animation-fill-mode : 規定動畫播放以前或以後，其動畫效果是否可見。
none (默認值) : 在運動結束以後回到初始位置，在延遲的狀況下，讓0%在延遲後生效
backwards : 在延遲的狀況下，讓0%在延遲前生效
forwards : 在運動結束的以後，停到結束位置
both : backwards和forwards同時生效
​
animation-direction : 屬性定義是否應該輪流反向播放動畫。
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永遠都是反向 , 從100%~0%
normal (默認值) : 永遠都是正向 , 從0%~100%

@keyframes 動畫的名字{
from{}/*起點位置*/等價於0%
to{}/*終點位置*/等價於100%
}
注：默認狀況下，元素運動完畢後，會停到起始位置。

一款強大的預設css3動畫庫。
官網地址：https://daneden.github.io/ani...
基本使用：
animated : 基類(基礎的樣式，每一個動畫效果都須要加)
infinite : 動畫的無限次數

CSS3漸變

background-image:linear-gradient(to top, red ，blue);
background-image:linear-gradient( num deg, red ，blue);
background-image:linear-gradient( red 25% ,blue 75%);

linear-gradient : 線性漸變
to top:表示去哪兒方向
num deg:角度以底下中點爲起點bottom位置，順時針轉。
red 25% ,blue 75%表示從25%到75%漸變，0~25%與75~100%沒有變化。
radial-gradient : 徑向漸變
​
background : linear-gradient(red 25%, blue 25% ,blue 50%,green 50%,green 75%,orange 75%,orange 100% );
以下圖，設置的四個色的顏色

文字陰影

text-shadow
x
y
blur
color
多陰影
注：默認狀況下，陰影的顏色跟文字的顏色相同。

盒子陰影

box-shadow x y blur : 模糊值 spread : 範圍 color inset : 內陰影 outset(默認值：外陰影 , 寫上outset不會生效，不寫就是外陰影) 多陰影 ​ 注：默認盒子的陰影就是黑色。