解析transform,transition和animation的區別

NO IMAGE

1. transform

1.1 定義

transform主要用於給元素做變換,主要由以下幾種變換,rotate(旋轉),scale(縮放),skew(扭曲),translate(移動)和matrix(矩陣變換).

語法:

transform: none | transform-functions

none表示不做變換, transform-functions表示變化函數,可以使一個變換函數或者多個變換函數的組合.

.transform-multi:hover {
transform: scale(1.2) rotate(30deg);
}

transform-origin轉換基點

transform-origin: x-axis y-axis z-axis;, transform-origin用來定義轉換的基點,默認的轉換基點是元素的中心點,下圖是以右下角為基點做變換的效果圖.

解析transform,transition和animation的區別

transform-style定義嵌套元素在三維空間呈現

transform-style: flat|preserve-3d;

  • flat: 表示所有子元素在2D平面呈現
  • preverse-3d: 表示所有子元素在3D空間中呈現

效果圖:

解析transform,transition和animation的區別

1.2 使用場景

簡單的羅列api的使用會讓人感覺枯燥和無意義,下面我就結合具體的使用場景來實踐transform的一些轉換函數.

  1. 使用transitionposition: absolute;結合實現水平垂直居中:

html:

<h2 style="padding-top: 20px;">使用transition實現水平垂直居中</h2>
<div class="transform-box">
<div class="middle-center">
<p>水平垂直居中</p>
<p>寬度和高度由子元素撐開</p>
</div>
</div>

css:

.transform-box {
width: 200px;
height: 200px;
position: relative;
background-color: #00f;
}
.middle-center {
background-color: #f00;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
color: #fff;
}

效果圖:

解析transform,transition和animation的區別

  1. 定義放大,旋轉,傾斜,矩陣變換等交互效果:

html:

<h2>scale, rotate, skew, martix</h2>
<div class="transform-box">
<div class="white-container">
<div class="gray-bg scale">
<div class="blue-content"> 
</div>
</div>
<p class="info-text">scale(2)</p>
</div>
<div class="white-container">
<div class="gray-bg rotate">
<div class="blue-content">
</div>
</div>
<p class="info-text">rotate(45deg)</p>
</div>
<div class="white-container">
<div class="gray-bg skew">
<div class="blue-content">
</div>
</div>
<p class="info-text">skew(45deg)</p>
</div>
<div class="white-container">
<div class="gray-bg matrix">
<div class="blue-content">
</div>
</div>
<p class="info-text">matrix(2, 2, 0, 2, 45, 0)</p>
</div>
</div>

css:

.transform-box {
display: flex;
text-align: center;
}
.white-container {
width: 200px;
flex: 0 0 200px;
margin-right: 20px;
background: #f1f1f1;
}
.gray-bg {
width: 100px;
height: 100px;
margin: 15px auto;
background: #ddd;
cursor: pointer;
box-shadow: 0 0 5px #ccc inset;
}
.blue-content {
width: 100px;
height: 100px;
position: relative;
background: #03A9F4;
opacity: .5;
box-shadow: 0 0 5px #ccc;
}
.info-text {
color: #555;
}
.scale:hover .blue-content {
-webkit-transform: scale(1.5, 1.5);
transform: scale(1.5, 1.5);
}
.rotate:hover .blue-content {
-webkit-transform: rotate(45deg);
transform: scale(45deg);
}
.skew:hover .blue-content {
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.matrix:hover .blue-content {
-webkit-transform: matrix(2, 2, 0, 2, 45, 0);
transform: matrix(2, 2, 0, 2, 45, 0);
}

效果圖:

解析transform,transition和animation的區別

值得一提的是如果有需要,我們可以使用matrix作出非常複雜的矩陣變換,有興趣的同學可以研究一下:CSS3 Transform Matrix

  1. 用js來動態改變transform的屬性值實現動畫的過渡效果:

我們以小球下落的動效來做示例:

html:

<h2>Js操作元素的transform屬性值實現小球下落動效</h2>
<button class="boll-btn" id="boll-btn">小球下落</button>
<div class="boll" id="boll"></div>

css:

.boll-btn {
width: 100px;
height: 30px;
line-height: 28px;
border: none;
border-radius: 5px;
color: #555;
margin-bottom: 10px;
}
.boll {
width: 40px;
height: 40px;
border-radius: 50%;
background: #03A9F4;
transform: translateY(0px);
margin-bottom: 300px;
}

js:

const domBoll = document.getElementById('boll')
document.getElementById('boll-btn').onclick=function() {
let distance = 0
let timer = setInterval(() => {
if(distance >= 300) {
clearInterval(timer)
}  domBoll.style.transform = 'translateY('+ distance++ +'px)'
}, 30)
}

效果圖:

解析transform,transition和animation的區別

如果需要的話,可以使用translate3d,rotate3d等API將元素提升為合成層,開啟硬件加速渲染,但開啟硬件加速渲染之後,有些時候可能會導致瀏覽器頻繁閃爍或抖動,可以嘗試以下辦法解決:

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

2. transition

2.1 定義

語法:

transition: property duration timing-function delay;

用來定義某個css屬性或者多個css屬性的變化的過渡效果.

屬性定義及使用說明:

描述
transition-property指定CSS屬性的name,transition效果: 大小,位置,扭曲等
transition-duration規定完成過渡效果需要花費的時間(以秒或毫秒計)。 默認值是 0,意味著不會有效果。
transition-timing-function指定transition效果的轉速曲線
transition-delay定義transition效果開始的時候

transition-property:

屬性值:

  • none: 沒有屬性獲得過渡效果
  • all: 所有屬性的變化都獲得過渡效果
  • property: 特定屬性變化獲得過渡效果,如: width, height,opacity等.

transition-timing-function:

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

屬性值:

  • linear: 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1));
  • ease: 規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1,0.25,1));
  • ease-in: 規定以慢速開始的過渡效果(等於 cubic-bezier(0.42,0,1,1));
  • ease-out: 規定以慢速結束的過渡效果(等於 cubic-bezier(0,0,0.58,1));
  • ease-in-out: 規定以慢速開始和結束的過渡效果(等於 cubic-bezier(0.42,0,0.58,1))
  • cubic-bezier(n,n,n,n): 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值

2.2 使用場景

  1. 實現激活狀態的過渡效果(寬度和透明度變化):

html:

<h2>transition: width&opacity</h2>
<p class="transition-p">菜單一</p>

css:

.transition-p {
width: 100px;
height: 40px;
opacity: 0.6;
border-radius: 10px;
background: #03A9F4;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s ease-in;
}
.transition-p:hover {
opacity: 1.0;
width: 120px;
}

效果圖:

解析transform,transition和animation的區別

  1. transition和transform結合實現動畫過渡

html:

<h2>利用transition和transform結合實現動畫過渡</h2>
<div class="boll1" id="boll1"></div>

css:

.boll1 {
width: 40px;
height: 40px;
border-radius: 50%;
background: #03A9F4;
transform: translateY(0px);
margin-bottom: 300px;
transition: all cubic-bezier(0.42,0,0.58,1) 2.0s 1.0s;
cursor: pointer
}
.boll1:hover {
transform: translateY(200px);
}

效果圖:

解析transform,transition和animation的區別

日常的菜單交互,鼠標移進放大,小球下落等交互都可以使用transition實現,transition一般只有兩個狀態,始態和終態.一般只有兩個狀態的單次動畫交互使用transition.

3. animation

3.1 定義

animation動畫的定義,先通過@(-webkit-)keyframes定義動畫名稱及動畫的行為,然後再通過animation的相關屬性定義動畫的執行效果.

語法:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

用來定義多箇中間態的一系列的動畫過渡效果.

屬性定義及使用說明:

描述
animation-name指定要綁定到選擇器的關鍵幀的名稱
animation-duration規動畫指定需要多少秒或毫秒完成
animation-timing-function設置動畫將如何完成一個週期
animation-delay設置動畫在啟動前的延遲間隔
animation-iteration-count定義動畫的播放次數
animation-direction指定是否應該輪流反向播放動畫
animation-fill-mode規定當動畫不播放時(當動畫完成時,或當動畫有一個延遲未開始播放時),要應用到元素的樣式
animation-play-state指定動畫是否正在運行或已暫停
initial設置屬性為其默認值, 閱讀關於 initial的介紹
inherit從父元素繼承屬性, 閱讀關於 initinherital的介紹

其中animation-name指向的是@keyframes定義的動畫.

@keyframes:

@keyframes animationname {keyframes-selector {css-styles;}}

描述
animationname必需, 定義動畫的名稱
keyframes-selector必需, 定義動畫的多箇中間態
合法值:
0-100%
from(和0%相同)
to(和100%相同)
css-styles必需的, 一個或多個合法的CSS樣式屬性

3.2 使用場景

  1. 定義一個循環自動執行的過渡動畫(還記得春晚的小彩旗嗎?)

html:

<h2>定義一個循環自動執行的過渡動畫</h2>
<div class="animation-container" >
<div class="animation-infinite">
循環自動執行的過渡動畫
</div>
</div>

css:

.animation-container {
position: relative;
padding-bottom: 50px;
}
.animation-infinite {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 50px;
padding: 10px;
background: #03A9F4;
color: #fff;
animation: move-to-right 2.0s infinite;
}
/* 定義右移動畫 */
@keyframes move-to-right {
0% {
opacity: 1.0;
width: 100px;
left: 0;
}
25% {
opacity: 0.4;
width: 120px;
left: 40px;
}
50% {
opacity: 0.6;
width: 150px;
left: 80px;
} 
75% {
opacity: 0.8;
width: 120px;
left: 40px;
}
100% {
opacity: 1;
width: 100px;
left: 0;
}
}

效果圖:

解析transform,transition和animation的區別

  1. 定義多個動畫的串聯執行

html:

<h2>animation定義多個動畫的串聯執行</h2>
<div class="animation-container" >
<div class="animation-infinite1">
多個動畫的串聯執行
</div>
</div>

css:

.animation-container {
position: relative;
padding-bottom: 150px;
}
.animation-infinite1 {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 50px;
padding: 10px;
background: #03A9F4;
color: #fff;
animation: to-right 2.0s ease-in,to-bottom 1.0s ease-in 2.0s,to-left 2.0s ease-in 3.0s,to-top 2.0s ease-in 5.0s;
}
@keyframes to-right {
0% {
top: 0;
left: 0;
}
100% {
top: 0;
left: 200px;
}
} 
@keyframes to-bottom {
0% {
top: 0;
left: 200px;
}
100% {
top: 100px;
left: 200px;
}
} 
@keyframes to-left {
0% {
top: 100px;
left: 200px;
}
100% {
top: 100px;
left: 0;
}
} 
@keyframes to-top {
0% {
top: 100px;
left: 0;
}
100% {
top: 0;
left: 0;
}
} 

效果圖:

解析transform,transition和animation的區別

和transform一樣,我們可以將animation動畫定義在一個class上,然後通過js操作給某個元素加上對應的類,從而觸發動畫的執行,我們可以靈活的進行多個動畫的切換,控制動畫的執行次數等.

總結

transform, transition 和animation的區別:

  • transform本身是沒有過渡效果的,它只是對元素做大小,旋轉,傾斜等各種變換,通過和transition或者animation相結合,可以讓這一變換過程具有動畫的效果,它通常只有一個到達態,中間態的過渡可以通過和transition或者animation相結合實現,也可以通過js設置定時器來實現.
  • transition一般是定義單個或多個css屬性發生變化時的過渡動畫,比如width,opacity等.當定義的css屬性發生變化的時候才會執行過渡動畫,animation動畫一旦定義,就會在頁面加載完成後自動執行.
  • transition定義的動畫觸發一次執行一次,想要再次執行想要再次觸發.animation定義的動畫可以指定播放次數或者無限循環播放.
    transition: 需要用戶操作,執行次數固定.
  • transition定義的動畫只有兩個狀態,開始態和結束態,animation可以定義多個動畫中間態,且可以控制多個複雜動畫的有序執行.

ps: 對這篇文章中的使用場景部分,我僅寫出來在我平時工作中會用到的一些場景,歡迎在評論區留言分享你們的一些動畫使用場景,供大家學習~ 示例源代碼地址

一起進步,願我們都能成為更好的自己~

往期回顧

相關文章

自定義View實現一個日期選擇器

堡壘機WebSSH進階之實時監控和強制下線

ThreadLocal快速瞭解一下

KafkaProducerSender線程詳解(含詳細的執行流程圖)