CSS變形與動畫

變形

div{
  transform: rotateX(180deg);/*繞X軸旋轉180度*/
  /*
    rotate 旋轉
      rotateX, rotateY, rotateZ 繞X,Y,Z軸旋轉
    scale 縮放
      X,Y,Z ...
    skew 傾斜
      X,Y ...
    translate 移動
      X,Y,Z ...
    單位:角度deg
  */
}

過渡

div{
  transform: rotateX(180deg);
  transition: all 1s ease 2s; /* 所有屬性 持續1秒 速度曲線爲ease 延遲1秒開始*/
  /*
    transition-property 屬性
    animation-duration 持續時間
    transition-timing-function 速度曲線 ease linear ...
    transition-delay 延時
  */
}

動畫

/* 定義動畫myani: 寬度從100px到300px */
@keyframes myani{
  0%{
    width: 100px;
    /* css */
  }
  100%{
    width: 300px;
    /* css */
  }
}

div{
  animation: myani 5s;/* 使用動畫myani, 持續5秒 */
  /*
    animation-name  要使用的@keyframes名稱
    animation-duration  持續時間
    animation-timing-function   速度曲線
    animation-delay 延遲
    animation-iteration-count  動畫循環次數
    animation-direction 下一週逆向播放
    animation-play-state 動畫運行、暫停狀態
    animation-fill-mode 不播放動畫時的狀態 forwards播放結束後保留在最後一幀狀態
  */
}