CSS動畫–讓div動起來
CSS動畫
今天在寫程式碼時候，遇到了css動畫效果如何實現的問題，經過查閱和實踐，總結出一下結論。
transition
1 .graduallymove{ 2 background-image: url(../../img/1.jpg);//設置背景 3 background-size:cover;//設置背景圖片的樣式 鋪滿整個div 4 position: relative;//設置div的位置屬性為相對定位 5 top: 100px;//設置距離上邊100px 6 left: 800px; 7 width: 500px;//設置div寬度為500px 8 height: 400px; 9 transition: 1s;//設置div動畫效果執行1s 10 box-shadow: 0 0 30px rgba(0, 0, 0, .5);//陰影效果 范範圍30px 黑色半透明 四周 11 animation: graduallymove 1.5s ease-out 0.2s ;//設置對象為 garduallymove 1.5s動畫 先快後慢 0.2s延遲後再發生 12 }
1 @keyframes graduallymove { 2 0%{ 3 opacity: 0; 4 top: 100px; 5 left: 0px; 6 7 } 8 9 10 11 100%{ 12 opacity: 1; 13 top: 100px; 14 left: 800px; 15 } 16 }
<body> <!-- <div class="leftmove"></div> --> <div class="graduallymove"></div> </body>
效果就是，圖片從左向右漸入，最後停在右邊。位置為top：100px;left:800px;
對於animation，由於屬性複雜，我再單獨講講。
animation（包含以下幾個屬性值，可以混合寫到一起，最後講）
animation-name （動畫對象）
animation-name：表示動畫的對象。animation-name屬性指定應用的一系列動畫，每個名稱代表一個由@keyframes定義的動畫序列。
/* Single animation */單一對象
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;
/* Multiple animations */複雜對象，多個對象
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;
/* Global values */全局值
animation-name: initial //最初的
animation-name: inherit//繼承的
animation-name: unset//不設置的
animation-duration （動畫時長）
animation-duration屬性指定一個動畫周期的時長。
默認值為0，表示無動畫效果。
注意：負值無效，瀏覽器會忽略該聲明，但是一些早期的帶前綴的聲明會將負值當作0s。
animation-timing-function （動畫方式）
定義於一個關鍵幀區塊的緩動函數(animation timing function)應用到改關鍵幀；另外，若該關鍵幀沒有定義緩動函數，則使用定義於整個動畫的緩動函數。
| 值 | 描述 |
|---|---|
| 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 之間的數值。 |
animation-delay （動畫延遲）
animation-delay CSS屬性定義動畫於何時開始，即從動畫應用在元素上到動畫開始的這段時間的長度。
animation-iteration-count （動畫次數）
animation-iteration-count 定義動畫在結束前運行的次數 可以是1次 無限循環.
如果指定了多個值，每次播放動畫時，將使用列表中的下一個值，在使用最後一個值後循環回第一個值。
可選值：
infinite
無限循環播放動畫.
<number>動畫播放的次數；默認值為1。
可以用小數定義循環，來播放動畫周期的一部分：例如，0.5 將播放到動畫周期的一半。不可為負值。
animation-direction （動畫方向）
animation-direction CSS 屬性指示動畫是否反向播放
可選值
normal
- 每個循環內動畫向前循環，換言之，每個動畫循環結束，動畫重置到起點重新開始，這是默認屬性。
alternate- 動畫交替反向運行，反向運行時，動畫按步後退，同時，帶時間功能的函數也反向，比如，
ease-in在反向時成為ease-out。計數取決於開始時是奇數迭代還是偶數迭代 reverse- 反向運行動畫，每周期結束動畫由尾到頭運行。(動畫反向進行)
alternate-reverse- 反向交替， 反向開始交替
- 動畫第一次運行時是反向的，然後下一次是正向，後面依次循環。決定奇數次或偶數次的計數從1開始。
animation-fill-mode （動畫保持）設置動畫最後的樣式為哪樣
animation-fill-mode 設置CSS動畫在執行之前和之後如何將樣式應用於其目標。
值
none
不設置任何樣式
forwards
最後一個關鍵幀的樣式（簡單點說就是）最後動畫的樣式
backwards
將在應用於目標時立即應用第一個關鍵幀中定義的值， （最初的動畫樣式）
both
兩個方向延展動畫樣式（個人覺得像forwards)
animation-play-state
animation-play-state 屬性定義一個動畫是否運行或者暫停。可以通過查詢它來確定動畫是否正在運行。另外，它的值可以被設置為暫停和恢復的動畫的重放。恢復一個已暫停的動畫，將從它開始暫停的時候，而不是從動畫序列的起點開始在動畫。
可選值
running
當前動畫正在運行。
paused
當前動畫已被停止。
可都將屬性寫到一起
