CSS3動畫入門 CSS動畫如何使用（舉例說明）
阿新 • • 發佈：2019-01-24
本文直接通過程式碼演示及註釋初步瞭解一下CSS3動畫的使用。
演示效果可以直接拷貝程式碼執行一下即可~
另外推薦幾個不錯的動畫網站：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動畫演示</title> <style type="text/css"> .test { width: 200px; height: 28px; background-color: #00b166; } /* @keyframes 規則用於建立動畫。 在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。 下面是一個從 20%（相對於動畫時長的百分比） 到 100% 的動畫 from = 0% to = 100% */ @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } /* 給某一個類新增動畫 需要給它配置animation屬性 語法： animation: name duration timing-function delay iteration-count direction; name:規定 @keyframes 動畫的名稱。 duration:規定動畫完成一個週期所花費的秒或毫秒。預設是 0。 timing-function:規定動畫的速度曲線。預設是 "ease"。 delay：規定動畫何時開始。預設是 0。 iteration-count：規定動畫被播放的次數。預設是 1。 direction：規定動畫是否在下一週期逆向地播放。預設是 "normal"。（alternate下一次反向播放，前提是播放次數大於1） */ .bounceOutLeft { width: 200px; height: 28px; background-color: red; -webkit-animation: bounceOutLeft 1s; animation: bounceOutLeft 0.6s ease-in; } </style> <script type="text/javascript"> changeClass = function () { // 設定一個計時器用於實現動畫結束後隱藏該元素。 // setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式。 setTimeout(function () { document.getElementById("test").style.display = "none"; }, 600); // 點選之後給元素新增動畫的兩種方式： // 1、通過替換class 這個方法有點傻逼 需要把原class的樣式重新寫一遍 只為了新增一個 animation屬性; // 2、直接在原class 上新增 animation屬性 // document.getElementById("test").className = "bounceOutLeft"; document.getElementById("test").style.animation = "bounceOutLeft 0.6s ease-in"; }; resetClass = function () { // 重置要做的事情有兩個： // 1、顯示元素 display = ""; // 2、取消動畫 animation = "" document.getElementById("test").style.display = ""; // document.getElementById("test").className = "test"; document.getElementById("test").style.animation = ""; }; </script> </head> <body> <div id="test" class="test"></div> <button id="changeBtn" onclick="changeClass()">change</button> <button id="changeBtn2" onclick="resetClass()">reset</button> </body> </html>