【網戰CSS動畫系列 EP04】滑動卷軸產生的動畫效果 Animate on Scroll; Making animations while scrolling using AOS

動畫由兩個組件組成：一個描述 CSS 動畫的樣式，以及一組指示動畫樣式開始與結束狀態的關鍵影格，其中也可能包含中間的途經點。

Web前端动画翻页制作方法包括：使用CSS动画、JavaScript库（如Animate.css、GSAP）、结合HTML5 Canvas和SVG技术、利用前端框架（如React、Vue）进行动态效果实现。 其中，使用CSS动画是一种相对简单且高效的方式，能够实现平滑的翻页效果。

CSS動畫其實沒那麼難！ 就像控制電影播放一樣，只要掌握幾個關鍵參數，你也能讓網頁元素跳躍、淡入、旋轉。 這篇用最簡單的方式教你CSS動畫，附上實用範例，立刻就能應用到你的網站上！

當鼠標滑過書本右上角時,書本即可向前翻一頁,而且翻頁動畫非常逼真。 由於 CSS3 的運用,前端工程師並不需要使用複雜的圖片來製造逼真的書本效果,書本翻頁可以很簡單地完成。

隨著瀏覽器對於 CSS 的支援度提升，現在已經可以透過 CSS 做出許多酷炫的「動畫」效果，這篇教學會先從 CSS 的 @keyframes 定義動畫影格，逐一介紹 CSS animation 各個樣式屬性，例如 animation-name、animation-duration、animation-delay、animation-timing-function、animation-direction...等 ...

今天，我们将学习如何使用纯CSS创建一个翻书页的动画效果，让你的网页更加生动有趣。 前言 纯CSS动画翻书页的效果可以通过多种方法实现，但这里我们将使用一个简单且高效的方法，利用CSS的transform 属性和animation 功能。

這部影片主要是介紹如何使用 CSS 製作翻書效果 (Book Flip)，過程中有使用到 perspective 和 perserve-3d 進行視差設定，讓翻書的效果更為真實。