03.animation動畫 · 程序員開發筆記

[TOC] #### animation: ? Animation只應用在頁面上已存在的DOM元素上，而且他跟Flash和JavaScript以及jQuery制作出來的動畫效果又不一樣，因為我們使用CSS3的Animation制作動畫我們可以省去復雜的js,jquery代碼。 #### @Keyframes ? keyframes即關鍵幀。一般和animation配合使用。用來安排運動過程。 ? animation: name duration timing-function delay iteration-count direction #### animation-name: ? 定義一個動畫的名稱。 #### animation-duration: ? 指定動畫播放時長，單位為s(秒),默認值為“0”。 #### animation-timing-function: ? 動畫的播放方式。和transition中的transition-timing-function一樣，具有以下六種變換方式：ease;ease-in;ease-in-out;linear;cubic-bezier。 #### animation-delay: ? 指定延遲時間。單位為s(秒)，其默認值也是0。這個屬性和transition-delay使用方法是一樣的。 #### animation-iteration-count: ? 指定元素播放動畫的循環次數，其默認值為“1”；infinite為無限次數循環。 #### animation-direction: ? 是否應該輪流反向播放動畫 ? 如果 animation-direction 值是 "alternate"，則動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向后播放。 #### animation-play-state: ? 控制元素動畫的播放狀態。有兩個值，running和paused其中running為默認值。他們的作用就類似于我們的音樂播放器一樣，可以通過paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放。 #### animation-fill-mode animation-fill-mode : none | forwards | backwards | both; none 不改變默認行為。 forwards 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。 backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。 both 向前和向后填充模式都被應用。(both表示forwards和backwards同時存在) 實例為 h1 元素規定填充模式： h1 { animation-fill-mode: forwards; } <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #hd{ width: 300px; height: 200px; background: purple; /*指定運動規則*/ /*animation-name: hd;*/ /*指定運動時間*/ /*animation-duration: 3s;*/ /*指定運動曲線*/ /*animation-timing-function: linear;*/ /*運動延遲*/ /*animation-delay: 2s;*/ /*指定運動次數*/ /*animation-iteration-count: infinite;*/ /*animation: hd 2s linear 1s infinite;*/ animation: hd 2s infinite; } /*設置運動規則*/ @keyframes hd{ 0%{ width: 300px; } 50%{ width: 900px; } 100%{ width: 300px; } } </style> </head> <body> <div id="hd"></div> </body> </html>