css3學習筆記（四）---變形與動畫

變形

1，旋轉--rotate()：以中心爲原點旋轉，正值順時針，負值逆時針

#test {
  transform:rotate(20deg);
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 }

2，扭曲--skew()：不會旋轉，只改變形狀，如長方形變成平行四邊形

#test {
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform:skew(45deg);
}

3，縮放--scale()：scale(x,y)，水平與垂直方向，只有一個參數則倍數相同

#test:hover {
  opacity: .5;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
}

4，位移--translate()：translate(x,y)，水平與垂直方向方向

#test {
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}/*水平垂直方向居中*/

5，矩陣--matrix(a,b,c,d,e,f)：含6個值的變換矩陣，用來指定一個2D變換，屬性值涉及到數學中的矩陣知識

#test {
  -webkit-transform: matrix(1,0,0,1,100,100);
  transform: matrix(1,0,0,1,100,100);
}/*相當於translate(100px,100px);*/

6，原點--transform-orgin：設置元素中心點，取值（top,bottom,left,right,top left,top right,bottom right,bottom left），默認情況下旋轉、扭曲等變形都是基於元素自己中心位置變形的，這個屬性可以改變元素中心點

#test {
  -webkit-transform: skew(15deg);
  -moz-transform: skew(15deg);
  transform: skew(15deg);
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  transform-origin: top right;
}/*基於右上角扭曲15度*/

動畫

1，過度屬性--transtion(property指定過度css屬性，duration指定過度完成時間，timing-function指定過度函數，delay指定開始過度的延遲時間)：

div {
  width: 200px;
  height: 200px;
  background: green;
  margin: 20px auto;
  -webkit-transition-property: width;
  transition-property: width;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
  transition-delay:.18s;
}/*等價於transtion(width,.5s,ease-in,.18s)*/
div:hover {
  width: 400px;
}/*寬度由200變爲400*/

多個屬性需要過渡時，用逗號隔開如下：

a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

timing-function(過度函數)：ease,linear,ease-in,ease-out,ease-in-out,具體如下圖

2，關鍵幀--keyframes：後緊跟動畫名加一對花括號{}，0%->100%可以用from->to表示

@keyframes changecolor{
  0%{
    background: red;
  }
  40%{
    background:orange;
  }
  80%{
    background:green;
  }
  100%{
    background: red;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

3,調用動畫--animation：分別有如下幾個屬性，其中timing-function與過渡中的timing-function有一樣的方法，

animation-name:around;/*動畫名*/
animation-duration: 10s;/*動畫在這個時間段內完成*/
animation-timing-function: ease;/*動畫播放方式*/
animation-delay: 1s;/*動畫延遲，在這個時間段後開始*/
animation-iteration-count:infinite;/*動畫播放次數，通常爲整數，此處意思是無限播放*/
animation-direction:alternate;/*normal是默認值，如果設置爲normal時，動畫的每次循環都是向前播放；此處是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。*/
animation-play-state:running;/*這個屬性應該設在hover下，元素本身的屬性設置爲paused；意思是讓停止的動畫在hover的時候播放，不是hover狀態停止*/
animation-fill-mode:none;/*設置動畫時間外屬性，詳情如下表*/

animation-fill-mode

屬性值	效果
none	默認值，表示動畫將按預期進行和結束，在動畫完成最後一幀時，動畫會反轉到初始幀處
forwards	表示動畫在結束後繼續應用最後的關鍵幀的位置
backwards	會在向元素應用動畫樣式時迅速應用動畫的初始幀
both	元素動畫同時具有forwards和backwards效果