# 2021 夏季切版直播班 week7 - CSS 動畫效果 ###### tags: `CSS` `animation` `transform` `上課筆記` 2021/08/13 上課筆記 ## CSS animation [完整解析 CSS 動畫 ( CSS Animation )](https://www.oxxostudio.tw/articles/201803/css-animation.html) ### 關鍵影格 @keyframe * 設定影格內容及位置 * 每日任務：[練習 keyframes](https://codepen.io/Zoechiueh/pen/ExXYoPM) ```css= /* The animation code */ @keyframes example { 0% {background-color:pink; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:50px;} } ``` ### 移動速率 #### 動畫持續時間 duration * 持續時間：秒數 s ```css= animation-duration: 4s; ``` #### 動畫播放延遲時間 animation delay * 延遲時間：秒數 s ```css= animation-delay: 2s; ``` #### 動畫播放次數 animation iteration count * 次數： * infinite 無限循環 * 數字 ```css= animation-iteration-count: infinite; ``` #### 動畫影格 animation fill mode * 停留在哪個影格 * forwards 停留在最後一個位置 * backwards: 留在第一個位置 * both 擁有前兩者功能(停留在最後一個位置+留在第一個位置) * [animation-fill-mode](https://www.w3cplus.com/css3/understanding-css-animation-fill-mode-property.html) ```css= animation-fill-mode: backwards; ``` #### animation 範例 ```css= /* The animation code */ @keyframes example { 0% {background-color:pink; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:50px;} } /* The element to apply the animation to */ div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; /* 晚幾秒發動 */ animation-delay: 2s; /* 要重複跑幾次，或者是用 infinite 一直持續跑 */ /* animation-iteration-count: infinite; * / /* 停留在哪個影格 forwards、backwards、both */ /* animation-fill-mode: backwards; */ /* forwards 停留在最後一個位置 backwards: 留在第一個位置 both 擁有前兩者功能 */ } ``` ## 業界常用動畫效果套件 animate.css * [animate css](https://animate.style/) 使用 * 用法：套用 2 個 class * 範例：**animateshakeX** class 套用 `animate__animated` `animate__shakeX` ### animate.css 的通用類別 * [Utility classes](https://animate.style/#utilities) * Delay classes * Slow, slower, fast, and Faster classes * Repeating classes ## transform 用法 * transform 屬性不會影響畫面空間 ### 旋轉 rotate * transform: rotate(...deg) 旋轉角度 * 每日任務：[練習 transform](https://codepen.io/Zoechiueh/pen/wvewpWq) ```css= transform: rotate(30deg); ``` ### 放大/縮小 scale * transform: scale(...) 放大縮小倍率 ```css= transform: scale(3); //放大倍率 ``` ### 移動 translateX translateY * translateX(...px) 水平移動 * translateY(...px) 垂直移動 ```css= transform: translateY(100px); ``` ## opacity 透明度 * 數值 1不透明 ~ 0透明 * 適合用於漸變效果 * 每日任務：[練習 opacity](https://codepen.io/Zoechiueh/pen/qBjWprB) ```css= opacity: 1; opacity: .5; opacity: 0; ``` ## 比較 visibility:hidden 與 display: none * `visibility: hidden;` 會佔用區塊空間 * `display: none;` 不會佔用區塊空間 * 做動畫效果 opacity 比 visibility 更實用 ### visibility * visibility 用法 value: visible(顯示) / hidden(不顯示) / collapse / inherit ## 【觀念小測驗】box-model 與 transform * 題目：哪些用法不會影響到 box-model 內容區塊？ a. display: none; b. transform c. opacity d. visibility: hidden; * ANS：b, c, d ## transition * 用法：簡單基本的效果建議可以使用 transition ```css= .box{ width: 100px; height: 100px; background: #000; transition: all .8s; /* all 代表全屬性 (width height background 三項都要有漸變效果)，也可以只要某項漸變 ex.transition: width .8s */ } .box:hover{ width: 300px; height: 300px; background: blue; } ``` ## AOS 套件 * [AOS 官網](https://michalsnik.github.io/aos/) * 此套件支援 RWD 響應式 * 使用此套件不太需要寫到 javascript * 原理：js 偵測移動到即將到來的區塊>> 動態加入 class 讓他出現效果 ### 載入步驟 在 </body>前加上以下程式碼 ``` <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script> ``` AOS 單一設計 ``` <div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center"> </div> ``` AOS 全域設計 ``` AOS.init({ // Global settings: disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on initClassName: 'aos-init', // class applied after initialization animatedClassName: 'aos-animate', // class applied on animation useClassNames: false, // if true, will add content of `data-aos` as classes on scroll disableMutationObserver: false, // disables automatic mutations' detections (advanced) debounceDelay: 50, // the delay on debounce used while resizing window (advanced) throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced) // Settings that can be overridden on per-element basis, by `data-aos-*` attributes: offset: 120, // offset (in px) from the original trigger point delay: 0, // values from 0 to 3000, with step 50ms duration: 400, // values from 0 to 3000, with step 50ms easing: 'ease', // default easing for AOS animations once: false, // whether animation should happen only once - while scrolling down mirror: false, // whether elements should animate out while scrolling past them anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation }); ``` * 學員範例：https://codepen.io/liao/pen/BaovZRg ## AOS範例 * 文章左右偏移：https://codepen.io/bradtraversy/pen/bGbREWg * 組合： https://codepen.io/amctagg1/pen/WVjGKw * 完整範例：https://codepen.io/taohuh/pen/OZmgRV * 每日任務：[aos + animate](https://codepen.io/Zoechiueh/pen/xxrKpXK) * 每日任務：[第七週版型 + aos](https://codepen.io/Zoechiueh/pen/dyRbJeX) ## 額外補充 * [hover.css](https://ianlunn.github.io/Hover/) * [菁英團](https://courses.hexschool.com/courses/951862/lectures/20753023)