技術標籤：csscsscss3html5

animation屬性值(有六個)：

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

一、animation-name：規定需要繫結到選擇器的 keyframe 名稱
取值：
none：（預設）規定無動畫效果（可用於覆蓋來自級聯的動畫）
keyframename：規定需要繫結到選擇器的 @keyframe 的名稱

二、animation-duration：規定完成動畫所花費的時間 以秒或毫秒計
取值：2s（兩秒）
time：規定完成動畫所花費的時間 預設值是 0 意味著沒有動畫效果

三、animation-timing-function：規定動畫的速度曲線
取值：
ease：預設。動畫以低速開始，然後加快，在結束前變慢
linear：動畫從頭到尾的速度是相同的
ease-in：動畫以低速開始
ease-out：動畫以低速結束
ease-in-out：動畫以低速開始和結束
cubic-bezier(n,n,n,n)：在 cubic-bezier 函式中定義自己的值 可能的值是從 0 到 1 的數值

四、animation-delay：規定在動畫開始之前的延遲
取值：
time：（可選）定義動畫開始前等待的時間 以秒或毫秒計 預設值是 0

五、animation-iteration-count

六、animation-direction ：規定是否應該輪流反向播放動畫
取值：
normal：預設值。動畫應該正常播放
alternate：動畫應該輪流反向播放

1、使用@keyframes規則定義動畫

如1：上下漂浮動畫

@keyframes float-vertical {
  0% {
    transform: translate3d(0, 0%, 0);
  }
  25% {
    transform: translate3d(0, 5%, 0);
  }
  75% {
    transform: translate3d(0, -5%, 0);
  }
  100% {
    transform: translate3d(0, 0%, 0);
  }
}
 

2、給要使用動畫的地方加：

.s-ranking {
	animation: float-vertical 1.5s infinite linear;
 }

如2：呼吸動畫

// scale-breathe這個是可以隨意起的名字
@keyframes scale-breathe {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

使用：

&NEXT {
    animation: scale-breathe 2s infinite linear;
  }

如3：漸變動畫

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

使用：

&-top {
      animation: fade-in 3s;
    }

如4：滾動動畫

@keyframes roll-in {
  0% {
    transform: translate3d(-5rem, 0, 0) rotate(740deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0);
  }
}

使用：

&hat {
      animation: roll-in 2s linear;
      z-index: 10;
    }