解析transform,transition和animation的區別

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-style`定義嵌套元素在三維空間呈現

`transform-style: flat|preserve-3d;`

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

1.2 使用場景

1. 使用`transition``position: 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;
}
``````

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;
}
.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);
}
``````

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;
color: #555;
margin-bottom: 10px;
}
.boll {
width: 40px;
height: 40px;
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)
}
``````

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

2. transition

2.1 定義

`transition: property duration timing-function delay;`

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;
background: #03A9F4;
text-align: center;
line-height: 40px;
color: #fff;
transition: all 0.5s ease-in;
}
.transition-p:hover {
opacity: 1.0;
width: 120px;
}
``````

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

html:

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

css:

``````.boll1 {
width: 40px;
height: 40px;
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);
}
``````

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的介紹

@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;
}
.animation-infinite {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 50px;
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;
}
}
``````

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

html:

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

</div>
</div>
``````

css:

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

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