animation、transition、transform的區別

FruitBro發表於2019-02-28
ORM

簡述

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：紅色與黃色相互切換
複製程式碼

animation、transition、transform的區別

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

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

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

相關文章