css3動畫的簡單學習

transform經常使用的屬性（2D變化）：

translate(x,y) 定義 2D 轉換。
scale(x,y) 定義 2D 縮放轉換
rotate(angle) 定義 2D 旋轉，在參數中規定角度。

translate定義元素在空間中的移動。對於x方向來講，向右移動，取值爲正，對於y方向來講，向下移動爲正值。
scale定義元素在空間中的縮放比例。默認是基於元素的中心爲來縮放。
rotate定義元素在空間中的旋轉。之前初中學課本中把逆時針旋轉造成的角度叫作正角,把順時針旋轉的角度叫作負角。可是在css變換中，x軸的方向是從左到右的，y軸的方向是從上到下，與課本中的座標方向相反，因此旋轉角度的正負定義與之前學過的定義正好相反即順時針爲正，逆時針爲負。

animation經常使用的屬性

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode

• animation-name
  須要使用的keyframes規則名稱，一般在keyframes規則中建立動畫的具體細節。
• animation-duration
  完成整個動畫所持續的時間。一般以s或者ms爲單位，記得添加單位。
• animation-timing-function
  設置動畫的速度變化曲線

1. ease:默認值。該屬性值使得動畫的速度在動畫開始和結束時比較慢，動畫執行中間速度較快。
2. ease-in:動畫開始時的速度比較慢，隨後加快。
3. ease-out：動畫在結束的時候速度比較慢。
4. ease-in-out：動畫慢速開始和結束的過渡效果
5. linear：從開始到結束都是一樣的速度。
6. cubic-bezier(n,n,n,n)：在函數中本身定義曲線的值。使用的頻率較少,可使用工具網站來根據本身的須要定製不一樣的曲線。

• animation-delay
  設置動畫開始以前等待的時間。與動畫持續時間相似，單位爲s或者ms。
• animation-iteration-count
  設置動畫的播放次數。能夠經過具體的數字來指定動畫的播放次數，也能夠經過css3規定的屬性值infinite來設置動畫無限次播放。
• animation-direction
  設置動畫是否須要反向播放。

1. normal：默認值。設置動畫應該正常播放，不須要反向播放。
2. alternate：一般運用在無限次播放動畫的情境中，動畫循環播放時，每次都是從結束狀態跳回到起始狀態，感受很突兀，該屬性能夠設置動畫在動畫執行完成以後，反向運動到動畫起點，。

• animation-fill-mode
  該屬性主要用來設置動畫在開始（設置延遲屬性的狀況下）和結束的狀態下須要顯示的效果。

  none：動畫完成以後回到動畫沒開始時的狀態。
  forwards：當動畫完成時，元素的樣式將保持keyframes最後一個關鍵幀中定義的樣式。
  backwards：在 animation-delay屬性所指定的時間內，元素的樣式將設置爲keyframes中設置的第一幀的樣式。
  both：同時設置了forwards和backwards屬性。即在動畫等待的時間內，元素的樣式爲keyframes設置的第一幀的樣式，動畫結束時，元素的樣式將保持最後一幀的樣式。

基本的動畫效果

元素飛入（上、下、左、右）

元素的透明度逐漸變化，同時位置也在不斷變化。以從左邊飛入爲例：

div{
    width: 100px;
    height: 100px;
    margin:80px 0 0 200px;
    background-color: #4993c8;
    animation: fadeInLeft 1000ms ease 5000ms both ;
}
@keyframes fadeInLeft {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
      }
      100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }
    }

元素進入頁面後左右晃動

元素進入頁面後，在元素位置附近作振幅較小的晃動。以從左邊進入爲例：

div{
    width: 100px;
    height: 100px;
    margin:80px 0 0 200px;
    background-color: #4993c8;
    animation: fadeInLeft 1000ms ease 5000ms both ;
}
 @keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-150%);
    transform: translateX(-150%);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateX(8%);
    transform: translateX(8%);
  }
  65% {
    -webkit-transform: translateX(-4%);
    transform: translateX(-4%);
  }
  80% {
    -webkit-transform: translateX(4%);
    transform: translateX(4%);
  }
  95% {
    -webkit-transform: translateX(-2%);
    transform: translateX(-2%);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

淡入強調

透明度逐漸變化，尺寸先變大後變小，最後恢復正常尺寸
一、透明度變化
二、基於原來的尺寸縮放

div{
    width: 100px;
    height: 100px;
    margin:80px 0 0 200px;
    background-color: #4993c8;
    animation: fadeInLeft 1000ms ease 5000ms both ;
}
@keyframes fadeIn {
  0% {
    -webkit-transform: scale(0) translateZ(0);
    transform: scale(0) translateZ(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.1) translateZ(0);
    transform: scale(1.1) translateZ(0);
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(0.9) translateZ(0);
    transform: scale(0.9) translateZ(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
    opacity: 1;
  }
}

元素旋轉淡入

一、旋轉。順時針旋轉須要設置初始的旋轉角度爲負值，反之亦然。
二、透明度發生變化

div{
    width: 100px;
    height: 100px;
    margin:80px 0 0 200px;
    background-color: #4993c8;
    animation: rotateIn 1000ms ease 5000ms both ;
}
@-webkit-keyframes rotateIn {
  from {
    opacity: 0;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
// 能夠經過transform-origin屬性來設置旋轉元素的基點位置

頁面箭頭重複運動

主要經過animation的animation-iteration-count屬性來規定動畫無限次播放

思路1：設置動畫移動的起始位置和終點位置，同時設置animation的animation-direction屬性爲alternate，輪流反向播放動畫。
思路2：動畫運動分紅3個關鍵點，起始位置、50%位置和100%位置，100%時間點的位置與開始位置相同，不用設置animation的nimation-direction屬性

.arrow{
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -20px;
    width: 40px;
    height: 24px;
    background: url('../images/arrow.png') 0 0 no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    animation:arrowing1 1000ms ease-in-out infinite alternate;
    // animation:arrowing2 1000ms ease-in-out infinite;
}
@keyframes arrowing1 {
    0% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    100% {
      -webkit-transform:translate3d(0,20px,0);
      transform:translate3d(0,20px,0);
    }
}
@keyframes arrowing2 {
    0% {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }
    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
        opacity: 1
    }
    100% {
       -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }
}