當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

css3之transition、transform、animation比较

發布時間：2023/11/27 生活经验 61 豆豆

生活随笔收集整理的這篇文章主要介紹了 css3之transition、transform、animation比较小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　css3動畫多少都有些了解，但是對于transition、transform、animation這幾個屬性一直是比較模糊的，所以啊，這里做一個總結，也希望大家都可以對此有一個更好地理解。

　 ? ?其實，最簡單的理解，我么可以這么認為：transition、transform、animation分別為過渡、變換、動畫。?他們三者的作用實際上是不一樣的，比如transition過渡一般都是配合hover使用的，對于transform呢，如果不配合，就是簡單的拉伸、縮放、偏移等靜態的變換，但是呢，如果配合transition，然后再使用hover這些觸發的方式，就會好得多啦。最后，animation是最為強大的，這個屬性可以做更多事情，下面就具體的說一說吧。

一、transition

　　它的作用很簡單，就是平滑的改變CSS值，?包括點擊事件、焦點事件、hover等，只要值改變了，就是平滑的動畫。其屬性如下所示：

transition-property 過渡的性質，比如background過渡。
transition-duration 過渡持續的時間，比如2s
transition-delay 延遲過渡時間，比如1s
transition-timing-function 指定過渡類型，有ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier

　　一般，我們是將這些屬性全部用transition寫在一起的，而不是分開寫，并且由于兼容性的問題，我們需要添加各個瀏覽器的前綴才可以。?

　　另外，對于transition-property、transition-duration、transition-delay都不難理解，但是，transition-timing-function應該如何去理解呢？恩，張鑫旭大神是這么理解的：

其實呢，理一理，也還好。首先cubic-bezier這個基本上就不用鳥了，99%的情況都用不到這個東西，所以，難得清閑，直接pass掉。linear很好記，線性嘛。至于ease-in | ease-out | ease-in-out，就是指緩動效果啦，說白了就是指開始時候慢慢動呢還是結束的時候慢慢動。那么in和out那個先慢慢動呢？啊，我們可以聯想記憶，很好記的。我們都知道OOXX吧，ease-in中的in就表示進入，進入的時候顯然一開始都是慢的，等瞄準就緒后才能快速沖刺進入，于是ease-in表示先慢后快；ease-out其out表示出來，出來肯定是先快后慢的，因為出來時臨近洞口速度肯定要降下來，免得跑出來亂了節奏，于是ease-out表示先快后慢；最后，很好理解的，ease-in-out表示一進一出，也就是先慢后快再慢。

　　我們可以通過點擊這個例子看效果。

　　下面就是一個簡單的使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>left</title><style>* {margin: 0;}html,body {width: 100%;height: 100%;}div.test {width: 100px;height: 100px;background: #feedad;border-radius: 10px;transition: all 2s ease-in-out;}div.test:hover {width: 200px;height: 200px;background: pink;border-radius: 30px;margin-left: 300px;transform: rotate(720deg);}</style>
</head>
<body><div class="test"></div>
</body>
</html>

從上面的代碼來看，我們是在沒有hover的類中，即本身class上填寫的 transition,通過all，就可以讓所有的屬性發生變化，并且屬性不需要只在一個地方寫，比如 div.test 中沒有margin-left，但是我們在div.hover中使用了 margin-left，這樣也是可以起作用的。

最終的效果如下：

　　　　、

二、 transform

　　transform從英文上來看，就知道是變換的意思，即常見的拉伸、壓縮、旋轉、偏移等：

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

　　我們在對一個塊級元素進行居中的時候，也常常會用到 transform: tranlate(50%, 50%) 屬性。但是呢？如果我們只是簡單地添加到某個元素上，是沒有動態效果的，而只是靜態的拉伸等。

　　但是，transform屬性要是和transition一起，那么就會行云流水了~ （另外，也是可以配置animation的~）

　　代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>left</title><style>* {margin: 0;}html,body {width: 100%;height: 100%;}div.test {width: 100px;height: 100px;background: #feedad;border-radius: 10px;transition: transform 2s ease-in-out;}div.test:hover {/* transform: scale(2); *//* transform: skewX(90deg); *//* transform: translate(50%, 50%); */transform: scale(2, 2) skewX(30deg) translate(50%, 50%) rotate(720deg);}</style>
</head>
<body><div class="test"></div>
</body>
</html>

注意：這里的transform不能分開寫，否則肯定是會覆蓋的，所以比較好的做法就是寫在一起拉，然后在div.test中寫 transition: transform 2s ease-in-out; 就會出現炫酷的效果啦！

三、animation

　　animation即動畫，當然要比過渡、變換更為強大了。缺點也是現在不能很好地在各個瀏覽器上收到支持。?

　 ? 這個animation的作用其實主要是為了替代flash的。?要創建css3動畫，我們就不得不使用@keyframes 規則，使用該規則創建動畫，它規定了一個css樣式和動畫將逐步從目前的樣式更新為新的樣式。?

　　使用了@keyframes之后，我們就必須把它綁定到animation選擇器，否則動畫是沒有任何效果的，這個animation選擇器至少需要兩個屬性：

動畫的名稱，即由@keyframes規定的名稱
動畫的總時長，即動畫完成需要的時間

舉例如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>left</title><style>* {margin: 0;}html,body {width: 100%;height: 100%;}div.test {width: 100px;height: 100px;background: #feedad;border-radius: 10px;-webkit-animation: myAnimation;-o-animation: myAnimation;animation: myAnimation 2s;}@keyframes myAnimation {from {background: blue;}to {background: yellow;width: 300px;height: 300px;margin-left: 500px;transform: skew(30deg) rotate(50deg);}}</style>
</head>
<body><div class="test"></div>
</body>
</html>

這樣，是不是很簡單啊，只要使用@keyframes定義，然后在animation中使用就可以了。?

四、三者比較

transitoin主要是用來做屬性的過渡的。?
transform主要來做變換。（一般要和transition或者animation配合使用）
animation主要用來做復雜的動畫。

? ?且transition從hover延伸而來，animation從flash延伸而來。

?

轉載于:https://www.cnblogs.com/zhuzhenwei918/p/6943147.html

總結

以上是生活随笔為你收集整理的css3之transition、transform、animation比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。