css3 transition 和 Animation的區別

簡述

css3 新增動畫功能，使開發人員不用js或者flash就能實現頁面的動態效果。css3提供兩種實現動畫效果的方式：transition，animation

• transition：控制元素從一個狀態到另外一個狀態之間的過渡
• animation：控制元素從包含多種狀態的幀到幀之間的變化

transition

• 每個須要過渡的屬性的兩種狀態都必須是明確的
• 能夠簡單的經過僞類 :hover, :focus, :active, :target觸發
• 包含四種屬性 transition-property（過渡的屬性）, transition-duration（過渡的時間）, transition-timing-function（過渡的時間曲線）, transition-delay（過渡效果的開始時間）
• 全部有中間狀態的屬性纔會有過渡效果
• 能夠過渡的屬性的值：color、length、visibility、font-size、z-index、number、font weight、percentage等

animation

• 彌補了transition不能一次控制多個屬性的不足
• 使用@keyframes定義animation，其中包含animation名字，何任意的animation斷點。 例如：

//動畫定義，一個名叫slide的animation
@keyframes slide {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}
//動畫觸發，在class爲ball的元素上觸發slide動畫，動畫持續時間爲兩秒
.stage:hover .ball {
  animation: slide 2s linear;
}

• 其中0%和100%可用from和to代替
• animation 有四個屬性，animation-name動畫名字、animation-duration動畫時長、animation- timing-function（動畫的時間曲線）、animation-delay（動畫延時）
• animation-iteration-count 控制動畫重複的次數，其值可爲一個整數或關鍵字infinite
• animation-direction 動畫播放的方向可選normal、reverse、alternate、alternate-reverse
• animation-fill-mode 規定動畫時間以外的狀態
• animation-play-state 規定動畫是否正在運行或暫停