animation、transition、transform的區別

簡述

1.transform用於元素旋轉、縮放、移動、傾斜等效果

2.transition用於較爲單一的動畫

3.animation通常用於較爲複雜、有中間態的動畫
複製代碼

用法

1.transform

transform是經過修改CSS視覺格式化模型的座標空間來實現的。

經常使用屬性有 scale()、rotate()、translate()、matrix()、skew()根據給定的X軸Y軸元素翻轉給定的角度。
屬性能夠單獨使用也可疊加使用。
複製代碼

transform: scale(2, 0.5) // x軸縮放2倍，y軸縮放0.5倍
transform: rotate(0.5turn) // 順時針旋轉0.5圈
transform: rotate(140deg) // 順時針旋轉140度
transform: translate(120px, 160px) //  x軸平移120px,y軸平移160px
transform: skew(30deg,20deg) // x軸旋轉30度,y軸旋轉20度
transform: matrix(1, 2, 3, 4, 5, 6) // 6個值的矩陣（須要再詳細）
transform: scale(0.5) translate(-100%, -100%); // x、y軸縮放0.5倍，再根據自身長寬向左向上translate移動100%（100%是由自身寬高決定的）
複製代碼

2.transition transitions

能夠爲一個元素在不一樣狀態之間切換的時候定義不一樣的過渡效果
。好比在不一樣的僞元素好比:hover，:active或者經過JsvaScript實現的狀態變化。
複製代碼

	name	duration	timing function	delay
transition：	margin-right、transform、opacity	2s	ease-in-out	2.5s

3.animation

animation屬性是以下屬性的一個簡寫形式：animation-name,animation-duration,
animation-timing-function,animation-delay,animation-iteration-count,
animation-direction,animation-fill-mode
複製代碼

	duration完成動畫所花費的時間	timing function規定動畫的速度曲線	delay動畫開始以前的延遲	iteration-count動畫播放的次數	direction是否應該輪流反向播放動畫	fill-mode動畫不播放是（當動畫完成時，或當動畫有一個延遲未開始播放時）樣式	play-state指定動畫是否正在運行或已暫停	name
animation：	3s	linear、ease-in	1s	2	reverse	both	paused	slidein

value	parameters
animation-name(綁定到選擇器的keyframe名稱)：	slidein
animation-duration(動畫指定須要多少秒或毫秒完成)：	3s
animation-timing-function(設置動畫將如何完成一個週期)：	linear 、 cubic-bezier-timing-function 、 step-timing-function 、 frames-timing-function
animation-delay(設置動畫在啓動前的延遲間隔)：	3s
animation-iteration-count(定義動畫的播放次數)：	infinite 、 number
animation-direction(指定是否應該輪流反向播放動畫)：	normal 、 reverse 、 alternate 、 alternate-reverse
animation-fill-mode(規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式)：	none、 forwards 、backwards 、 both
nimation-play-state(指定動畫是否正在運行或已暫停)：	running 、 paused

附：animation裏的steps()用法

steps()是一個timing function,容許咱們將動畫或者過渡分割成段，而不是從一種狀態持續到另外一種狀態的過渡。最核心的一點就是：timing-function做用域每兩個關鍵幀之間，而不是整個動畫。

steps(<number_of_steps>,<direction>)
複製代碼

這個函數有兩個參數——————第一個參數是一個正值number，指定咱們但願動畫分割的段數。第二個參數定義了這個要點在咱們的@keyframes中申明的動做將會發生的關鍵。這個值是可選的，在沒有傳遞參數時，默認爲「end」.「start」和「end」指定在每一個間隔的起點或是終點發生階躍變化，默認爲end。 方向爲「start」表示一個左--持續函數，在動畫開始時，動畫的第一段將會立刻完成。以左側端點爲起點，當即跳到第一個step的結尾處。它會當即跳到第一個step的結尾處。它會當即跳到第一段的結束而且保持這樣的狀態直達第一步的持續時間結束。後面的每一幀都將按照此模式來完成動畫。

方向爲「end」表示一個右--持續函數。動畫執行時，在每一幀裏，動畫保持當前狀態直到這一段的持續時間完成，纔會跳到下一步的起點，後面的每一幀都會按照這個模式來進行，在最後一幀的起點，等到這一幀的持續時間結束，整個動畫的執行也已經結束，執行動畫元素來不及跳到這一幀的終點，直到回到了整個動畫起點，開始 第二次動畫。每一個選擇本質上從一個不一樣的面移動這個圓度而且將產生一個不一樣的位置在這個相同的動畫裏。

animation: circle 2s steps(3, start) infinite;
@-webkit-keyframes circle {
    0% {
        background: red
    }
    50% {
        background: yellow
    }
    100% {
        background: blue
    }
}
step-start: 黃色與藍色相互切換
step-end：紅色與黃色相互切換
複製代碼

參考：css動畫裏的steps()用法詳解

CSS3 animation屬性中的steps功能符深刻介紹

記住position參數的含義 牢記這麼一句話：一切都是反的！start不是開始，而是結束；end不是結束，而是開始。