關於animation和transition一點知識

時間 2020-02-14

標籤關於 animation transition 一點 1點知識简体版

原文原文鏈接

在使用CSS3動畫時相信不少人都會接觸過animation，transition以及transform屬性。經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript——CSS3是世界上最可愛的語言css

CSS3動畫和JS動畫的區別

JS 實現的是幀動畫 CSS3 實現的是補間動畫html

幀動畫：使用定時器，每隔一段時間，更改當前的元素 補間動畫： 過渡（加過渡只要狀態發生改變產生動畫）動畫(多個節點來控制動畫)性能會更好性能

transition

transition是一個簡單的動畫屬性，能夠看做是是animation的簡化版本，一般拿來配合事件觸發使用，簡單易用動畫

transition的屬性值

描述	屬性
transition-property	須要過渡的屬性，也能夠是all，不能用block，none等
transition-duration	指定從一個屬性到另外一個屬性過渡所要花費的時間。默認值爲0，爲0時，表示變化是瞬時的，看不到過渡效果
transiton-timing-function	就是過渡的動畫類型。可用的類型有liner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，能夠定製
transition-delay	指定檢測到過渡行爲以後延遲必定時間後纔開始進行執行

transition特性

transition需用事件觸發【好比加個hover僞類】，不能在網頁加載時自動發生
一次性，不能重複發生，除非一再觸發
只有兩個狀態：開始和結束狀態
一條transition規則只能定義一個屬性

<body>
    <div class="box"></div>
</body>
<style> .box { height: 100px; width: 100px; background-color: lightpink; transition: width 1s 0.5s ease-in-out; } .box:hover { width: 200px; } </style>
複製代碼

效果以下spa

也能夠在 hover 中寫 transition: width 1s 0.5s ease-in-outssr

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}
複製代碼

其實寫在hover上也是能夠的，可是當我移出元素後，元素寬度立馬恢復，而沒有過渡！緣由很簡單，你transistion只寫在hover上，也就是說只有鼠標移上去的時候，該僞類才生效3d

animation

animation的屬性值

屬性	描述
animation-name	用來調用@keyframes定義好的動畫，與@keyframes定義的動畫名稱一致
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0
animation-timing-function	速度曲線，和transition-timing-function同樣，可用的類型有liner（勻速）、ease-in(減速)、ease-out（加速）ease-in-out（先加速再減速）、cubic-bezier：三次貝塞爾曲線，能夠定製
animation-delay	規定動畫什麼時候開始，默認是 0
animation-iteration-count	規定動畫被播放的次數。默認是 1
animation-direction	normal 默認值，若是設置爲normal時，動畫每次循環都是向前（即按順序）播放，alternate（輪流），動畫播放在第偶數次向前播放，第奇數次向反方向播放（animation-iteration-count取值大於1時設置有效）
animation-play-state	running，能夠經過該值將暫停的動畫從新播放，這裏的從新播放不是從元素動畫的開始播放，而是從暫停的那個位置開始播放，paused，暫停播放
animation-fill-mode	默認狀況下，動畫結束後，元素的樣式將回到起始狀態，animation-fill-mode屬性能夠控制動畫結束後元素的樣式。主要具備四個屬性值：none（默認，回到動畫沒開始時的狀態。），forwards（動畫結束後動畫停留在結束狀態），backwords（動畫回到第一幀的狀態），both（根據animation-direction輪流應用forwards和backwards規則）

<body>
    <div class="box"></div>
</body>
<style> .box { height: 200px; width: 200px; animation: 3s type forwards alternate infinite; animation-play-state: running; } .box:hover { animation-play-state: paused; } @keyframes type { from { background: yellowgreen } 50% { background: yellow } to { background: aquamarine } } </style>
複製代碼

當鼠標移入的時候暫停，移出的時候繼續變換顏色code

transform

首先要注意的是transform屬性是靜態屬性，只要寫進style裏就會直接顯示生效，不會出現動畫過程經過使用transform屬性，可以對元素進行移動（translate）、縮放（scale）、旋轉（rotate）、翻轉（skew），更多詳細參數能夠參考CSS3 transform 屬性orm

總結

區別	transition	animation
是否能自動執行	不能，須要事件觸發，好比hover	能
可否重複發生	不能，除非在一次觸發	能
可否包含多個狀態	不能，只有開始和結束狀態	能，好比從0% 到100%，任意指定過渡狀態
可否暫停	不能，一次性	能，好比hover事件觸發暫停
可否定義速度曲線	能	能
可否定義某個屬性值過渡	能	能