在以往，想在HTML上實現動畫效果，要不就用被喬布斯恨死的了Flash 動畫，要不就用網頁動畫影象或者JavaScript 實現效果。在CSS3之後，就可以用CSS在HTML上實現動畫了。
要建立 CSS3 動畫，你需要了解 @keyframes 規則。現在 @keyframes 建立動畫時，需將其繫結到一個選擇器，否則動畫不會有任何效果。
13.1 原生建立動畫用CSS3原生程式碼建立動畫，語法是@keyframes animationname {keyframes-selector {css-styles;}}，其中animationname ：必需，動畫的名稱；
keyframes-selector：必需，動畫時長的百分比合法的值：0-100%， from（與 0% 相同），to（與 100% 相同）css-styles：必需，一個或多個合法的 CSS 樣式屬性。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>動起來</title> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: myfirst 5s; -webkit-animation: firstan 5s; /* Safari and Chrome */ } @keyframes firstan { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% { background: red; left: 0px; top: 0px; } 25% { background: yellow; left: 200px; top: 0px; } 50% { background: blue; left: 200px; top: 200px; } 75% { background: green; left: 0px; top: 200px; } 100% { background: red; left: 0px; top: 0px; } } </style></head><body><div/></body></html>輸出結果
13.2 動畫庫建立如果每次都要自己手動用CSS去建立動畫，那效果太低了。為此，有人專門專門開發了CSS動畫庫animation.css。可以線上https://animate.stylek看效果，它裡面的動畫效果，可以滿足大多數需求了。下載https://github.com/animate-css/animate.css裡的animate.min.css檔案，放到HTML檔案相同目錄下。
#前端##HTML5##CSS##程式設計師##Web#
最新評論