transition實現簡單的過渡動畫
@keyframes實現更詳細的動畫
waapi實現動畫
語法：
transition: css-property duration timing-function delay
每個屬性的意思和使用@keyframes中的講解是一樣的。
舉個例子
-webkit
-transiton: background 2s linear 2s,
border-radius
3s ease-in
4s;transiton: background 2s linear 2s,
border-radius
3s ease-in
4s;
transition: all 2s;transition: 2s;中，除了duration沒有預設值外，其他的都有預設值。
css-property：預設值all
timing-function：預設值ease
delay：預設值0
而且這些屬性是沒有順序限制的，可以隨便寫，就像這樣的。
transition: ease-out 2s width;語法：@keyframes identify{}
由於目前已經得到了各大瀏覽器很好的支援，所以對於移動端的開發可以無需新增瀏覽器字首
如果你非要新增字首，應該是這樣的
@-webkit-keyframes identify{},
@-moz-keyframes identify{}
看個簡單的例子
@keyframes show
25%50%
100%
}
@keyframes show
percentageto}
.zhegai_con
.show
animation語法：
animation: identify duration timing-function delay iterations direction fill-model play-state
各個屬性的解釋：
identify: 在@keyframes中定義的規則名稱，不可省略的屬性。
duration：動畫持續的時間，預設值為0，不可省略的屬性。如果省略了，相當於取預設值0，看不到動畫效果，看到的直接是最終的效果。
timing-function: ease|ease-in|ease-out|ease-in-out|linear|cubic-bezier(p0,p1,p2,p3)。
緩動函式，預設值ease。各緩動函式的影象如下
先快後慢
先慢後快
先快後慢
開始慢後快再慢
勻速cubic-bezier(p0,p1,p2,p3)：自定義三次貝塞爾曲線，有專門的工具可以製作。
delay：用來指定乙個動畫開始執行的時間。預設值0,可以是正值，也可以是負值。如果是取值不為0，那麼必須帶上時間單位s(秒)，ms(毫秒)，否則被視為乙個無效的屬性值，看不多動畫效果。
正值：動畫延遲多少時間後開始執行
負值：動畫從該時間點執行，該時間點之前的動畫被截斷，截斷之前的動畫都是看不到的。
iterations：指定動畫重複的次數，預設值為1。取值infinity表示無限重複。
fill-model:none|forwards|backwards|both（目前測試還沒看出到底有什麼效果），文件上的描述如下：
none：預設值，表示動畫按預期的方式進行和技術，在動畫完成後，動畫會反轉到初始幀處。
forwards：動畫在結束後繼續應用最後關鍵幀的位置。
backwards：會在向元素應用動畫樣式時迅速應用動畫的初始幀。
both：同時具有forwards和backwards效果。
web animation api,使用該api，可以使用原生的js來建立乙個動畫。
使用方法：element.animate()
看乙個最簡單的例子
document.body.animate(
[, , ]
, 3000);
按照上面對引數的解釋，可以像這樣建立乙個動畫
var player = animatel.animate([,,
,,],);
player.play(); //running
player.pause(); // paused
player.finish(); //finished
player.cancel(); // idle
var animatel = document.getelementbyid('animation');
var player = animatel.animate([,,
],);
animatel.animate([,,
],);
這裡列出3種：一種可以使用計時器
settimeout(function
(), duration)
//此處的duration應當是第乙個動畫持續的時間
var player = el.animate(frames1, config1);
player.onfinish = function
(e)
el.addeventlistener('animationend', function
(), false);
css3 js 粽情端午
根據慕課網上的案例寫了粽情端午，對css3動畫掌握了更深，也對js加一步學習了，以我目前的水平可能做不了什麼好的，但是寫完這個之後，一直在嘗試著寫另乙個css3的案例，就是不知道能不能寫完了。發現的問題還是js掌握的不好，在學習css3的同時，也要加一步對js進行複習。以下是我模仿的粽情端午的案例 ...
css3 js實現3D旋轉效果
用css3和js實現3d旋轉的效果，主要使用到css3 transform中的一些屬性 perspective，rotate，translate。下面主要介紹一些transform中的屬性的效果和作用 1.transform style 一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3d...
用css3 js寫了乙個鐘錶
先給個成品圖,最終結果是個樣子的 動態的 html 如下 div class dial div div class bigdiv bigdiv1 id secondhand div class secondhand div div div class bigdiv bigdiv2 id minute...