animation

@keyframes example 語意 :建立動畫,動畫名稱為 example。

  • animation-name → 要執行的 animation 名稱
  • animation-duration → 執行過程秒數
  • animation-delay → 延遲幾秒發動 animation
  • animation-iteration-count : infinite; → 要重複跑幾次,或者使用 infinite 一直持續跑
  • animation-fill-mode: forwards | backwards | both ; → 要停在哪個影格 ( forward 停留在最後一個位置 |backwards 留在第一個位置|both 擁有兩者功能 ) 。

註 :如果不想要使用 animation-fill-mode:both; ,可於 @keyfarmes 中的開始與結束數值寫一樣並搭配 animation-iteration-count : infinite;,就會很順的重複跑。


animation Codepen 範例 1

  • 元素要載入動畫可使用 animation-name :動畫名稱;
@keyframes example{
    from { left:0px; top:0; } /*元素起始位置*/
    to { left:200px; top:0;} /*元素結束位置*/
} 

animation Codepen 範例 2

animation Codepen 範例2-1 → 例如一隻狗在追東西跑出網頁外

  • @keyframes 內設定的 % 會依照 animation-duration 執行過程的秒數下去分配。例如 :animation-duration:4s; 那 25% 會在 1 s 時間由第一個影格移到第二個影格上且變黃色。
https://codepen.io/echocarriet/pen/WNGQWBO

transform

  1. 文件 CSS transform Property
  2. 基本範例

實做練習

圖片水平翻轉 180 度。 Codepen 連結

transition 與 animation 差異

transiton 只能設定一個個腳本,animation 可以設定多個腳本 ( 如上方範例 )。

佔空間與不佔空間的屬性們

Q1. opacitytransformdisplayvisibility 哪些屬性會佔據空間,哪些不會?

#1-1 會佔據空間的屬性

  1. opacity
  2. transform
  3. visibility

不會因為此元素做了任何動畫或是隱藏而對下方的空間產生影響 ( 例如 footer 不會因上方的元素做了動畫而產生位移 )。 基本範例

#1-2 不會佔據空間的屬性

  1. display

#1-3 總結 :

如果要做動畫效果會建議使用會佔據空間的屬性,這樣當某元素執行動畫效果時,不會影響其他元素的位置變得大家都在動 XD 使用者體驗會比較好。 Codepen 範例

animation 效果的套件

1 Animate.css 套件

Animate.css 特性 :

  • 擁有多個動畫效果。 ( 使用 CSS 達到此效果 )

載入方式 + 使用方法

Animate.css Codepen 套用範例

  • 可使用 npm、CDN 方式載入。
  • 點選右方側欄的類別們,中間的圖示就會顯示動畫,選定後點選右方名稱旁的小方塊即可複製 html。animate__animated 為基本樣式不可刪,替換調後方 animate__bounce 部分。
<h1 class="animate__animated animate__bounce">An animated element</h1>
  • Animate.css 也提供 Delay、Slow, slower, fast 等 class 套用,此部分可看官方文件中的 Utility classes

Animate.css 搭配 Javascript

Codepen 範例 、可參考官方的 " Usage with Javascript " 。

  • 把 Animate.css 的 class 引用到 jQ 內,點擊 h2 時觸發。
  • 然後金魚腦的我忘記加 jQ 的 CDN 導致一直無法觸發 XD。
<h2>點我觸發 box 彈跳</h2>
<div class="box"></div>
$(document).ready(function(){
  $('h2').on('click' , function(){
     $('.box').toggleClass('animate__animated animate__rubberBand') ;   
  })         
});

抓取 Animate.css 部分樣式放置自己專案中

Animate.css 客製範例

如果只想使用 Animate.css 的某些樣式,不想要以 npm、CDN 方式載入全部樣式,可參考下方作法。

STEP1. 開發者工具查看所需樣式複製下來

  • 複製 Animate.css 的 html 到 Vscode 或 Codepen ,開啟開發者工具查看樣式
  • 把 animation 會用到的樣式複製起來,貼至自己的 css 中。
<h1 class="animate__animated animate__bounce">An animated element</h1>
@keyframes

.animation-name
.animation-fill-mode
.animation-duration

切版班視差滾動_01

// 開發者工具內的 @keyframes ▲

切版班視差滾動_02

// 因 css檔案都有壓縮,所以可以按 {} 開啟壓縮檔 ▲

STEP2. 把 class 更改為自訂名稱

  • 把 Animate.css 的 class 換成自己的 class ( 例如 animation__shakeYY ) &@keyframes 改成自訂名稱 ( 例如 shakeYY )

補充
transform: translateZ(0); 為觸發GPU加速,一般使用 top、right、left、bottom 移動很吃 CPU 效能,所以使用 transform 可觸發顯示卡的GPU 加速效能上會較好,所以做動畫會建議用 transform 為主。

2 AOS 套件

AOS 特性 :

  1. 滾到特定位置,就觸法功能。 ( 用 JS 達到 )
  2. 擁有多個動畫效果。 ( 用 CSS 達到此效果 )

2-1. 載入方式

  • 可使用 CDN 或 npm 方式安裝。

2-2. 設定方式

六角學院提供範例

  • 六角學院提供範例 中,開啟開發者工具可見,執行 .aos-init .aos-animate 會觸發 data-aos="fade-left"

切版班視差滾動_03

  • div 寫個別設定的話會蓋掉全域設定,客製時可先寫全域設定後,再針對個別元素寫個別設定。
  • offset : 元素離底部多少距離會再觸發下一個元素動畫,老師大概都抓 80 -150。 影片 23:00 / Codepen 範例

切版班視差滾動_04

<!--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

});

2-3. AOS範例

視差滾動套件與影片

AOS + Animate.css 整合

六角學院提供的範例

AOS 只做這兩件事 :

  1. 運用 offset 去偵測是否符合條件,
  2. 符合就新增 class 進去。
  • 根據上兩件事於 範例中 可見,AOS 搭配 Animate.css 使用時,當滑鼠滑到第二個 box 觸發後開發者工具可見新增了兩個 Animate.css 的 class .animate__animated .animate__fadeInDown。( AOS 當觸發用 )
<!--還未觸發-->
<div class="item item2" data-aos="animate__fadeInDown">2</div>

<!--觸發後-->
<div class="item item2 animate__animated animate__fadeInDown" data-aos="animate__fadeInDown">2</div>

實做步驟 :

Codepen 範例1

Codepen 範例2 ( 搭配 BS )

STEP 1. 加入 AOS 與 Animate.css 的 CDN ( 亦可使用 npm )

要注意官方 CDN 是否有做更新。AOS 的 CDN 似乎過期,可看 Github 提供的 CDN

<!--AOS CDN-->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

https://unpkg.com/aos@next/dist/aos.js

<!--Animate.css CDN-->
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

STEP2. 環境設定

#2-1. CSS 設定

不想用 AOS 官方的 class,想替換成其他套件可加入下方程式 :

  • 這邊使用 Animate.css 套件,把 [data-aos]. 後方換成 Animate.css 的主體 class → [data-aos].animate__animated { }
[data-aos] {
  visibility: hidden;
}
[data-aos].animate__animated {
  visibility: visible;
}
  • :root{} 內為想預設的執行過程時間 & 延遲時間。
:root {
  --animate-duration: 1800ms;
  --animation-delay: 2.9s;
}

#2-2. Javascript 設定

  • AOS.init(); 做下方修改
    • animatedClassName : 因為這邊要套用 Animate.css 套件,所以加入它的主體 class → animate__animated
// AOS Github 中 animatedClassName: 'animated' 為舊版的 class,
//目前 Animate.css 的主體語法為 animate__animated,下方為以更改後版本。
AOS.init({
  useClassNames: true, //使否要用自己想套用的樣式
  initClassName: false,
  animatedClassName: 'animate__animated',  //想套用樣式的 class 名稱
});

STEP 3. 到 Animate.css 找適用的 class 代入即可

  • AOS 為觸發用工具,所以 data-aos='' 加入 Animate.css 的 class。
<!--這邊代入 heartBeat 動畫-->
<h1 data-aos="animate__animated">Animate + AOS</h1>

開發者工具屬性解說

切版班視差滾動_05

六角學院提供範例 ,如果 HTML 中,屬性有 fade 這個關鍵字 ( 上圖 h2 中的 data-aos="fade-left" ),就可以吃到 CSS 的樣式顯示開啟或隱藏。

.

備註區

  1. 以上步驟可參考 AOS Github 的 Integrating external CSS animation library (e.g. Animate.css) ,因AOS Github 文件中有些文件未更新,所以上方步驟有做些微調整。
  2. 以上方式用 Animate.css 就不能使用 AOS 效果。

視差滾動

background-attachment: fixed;

  • 主要效果為固定背景,讓文字滑動時背景是不會跟著滑動的。 w3school DEMO
.parallax{
    /* The image used */
  background-image: url("img_parallax.jpg");

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

視差滾動文章

  1. w3school – How TO – Parallax Scrolling
  2. 卡斯伯 – CSS沒有極限 – 意想不到的background-attachment

使用套件注意事項

MIT 表示可以商業授權,但需備註此外掛是哪裡出處。

找外掛盡量找 MIT 授權的,例如 : Animate.css

切版班視差滾動_06

// Animate.css 的 Github 版權 ▲

切版班視差滾動_07
// Animate.css 官方 css 檔案中的備註

BS utilities 中的 stretched-link

Stretched link

  • .stretched-link 的 class 可使齊包含的整體區域被點擊到。
  • 像 components 內的 card 模組具有 position:relative;,所以可把 .stretched-link 加入 .card 中,無需做其他 HTML 的更改,但像 Media 是沒有 position:relative; ,就需要另外加上 .posiiton-relative,才可正常啟用此效果。
  • .stretched-link 不建議使用多個連結和點擊目標。

資料來源

六角學院

外掛

文章

最後修改日期: 12 月 30, 2020

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。