Zi 字媒體

此篇文章瀏覽量： 4,340 前言 在 UI 當道的領域當中，要讓介面更加地易於使用，就必須要善加利用 animation 來創造動畫效果，有非常多的「微互動」都會需要使用，瞭解 keyframes 與 animation 勢在必行。 Keyframes 建立多個狀態的轉場效果，A to B to C (and on)。 可以自動播放，不用依賴任何的事件監聽(例：hover)。 有更多可以控制的層面，例如 direction、looping。 Keyframes 語法 @keyframes 是關鍵字，代表要開始設定 keyframes 了，後面緊接著這一系列 keyframes 的名稱(name)，這個 name 是可以自己定義的。而在最外層大括號中間，就開始設定各個 State，以下例來說，是 0%、50%、100% 的時候，會有各自的 State，依據不同的 State，設定 CSS： @keyframes 自訂的name { 0% { ... } 50% { ... } 100% { ... } } 以上例來說的話，整個動畫會是從 0% 開始，然後轉場到 50%、再轉場到 100%，然後到 100% 的時候，可再設定要停止，或是自動回到 0% 開始重頭播放。 最後當我們定義好了一個 @keyframes 時，要將之運用在某個元素的時候，就會需要使用 css 中的 animation 了。 animation 語法 animation: keyframes_name 2s 1s ease-out forwards; // 等同於： animation-name: keyframes_name; // 這裡的 keyframes_name 就是定義好的名稱。 animation-duration: 2s; // 動畫執行期間的秒數。 animation-delay: 1s; // 等待 1 秒之後，才會開始執行 keyframes 所設定的動畫。 animation-timing-function: ease-out; // 轉場的 timing function。 animation-fill-mode: forwards; // 在動畫結束之後，該停在哪個狀態或該如何接續進行動畫，這裡選 forwards 是指停在 100% 的狀態，可選的值有 none(default)|forwards|backwards|both|initial|inherit 除此之外，還有其它有關於 animation 的 css 可以使用： animation-iteration-count: 1; // 動畫重覆的次數，如果要無限次數，就設定 infinite。 animation-direction: normal; // 在執行 keyframes 時，預設通常都是從 0% 執行到 100%，如果想要設定從 100% 執行到 0% 時，就可以設定 reverse。另一個選項是 alternate，會從 0% 執行到 100%，然後再從 100% 執行回 0%。 animation-play-state: running; // 可以的選項有 running|pause，與影片的播放、暫停是同樣的意思；這在與 JS 搭配時，可妥善控制動畫。 談談 Timing functions 預設的 Timing functions 有以下幾種： ease：是預設的。慢進 → 加速 → 減速到結束。 ease-in：慢進 → 加速到結束。 ease-out：快進 → 減速到結束。 ease-in-out：開始跟結束都是慢的狀態。 linear：以相同速度前進。 steps()：無連續的動作，直接跳至各步 ( step ) 的指定 css。 cubic-bezier()：指定動畫滑動的曲線，此網站可視覺化的指定。 預設的 Timing functions 示範： ease linear ease-in ease-out ease-in-out cubic-bezier(.5, -.5, .5, 1.5) steps(3) 進一步瞭解 cubic-bezier 有名的貝茲曲線(cubic-bezier)，在 CSS3 中的 animation-timing-function 就是可以讓你指定 cubic-bezier 的地方，預設中的 ease、ease-in、ease-out、ease-in-out、linear ，其實都可以透過 cubic-bezier 來達成，當你想要客製化一些移動的動畫效果時，就會需要用到 cubic-bezier，詳細範例可以在此網站瀏覽。 範例 範例 1：重新瀏覽網頁方可看到效果 Surprise! 看原始碼：html css // html Surprise! // css @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .demo_basic_animation { animation-name: fade-in; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: ease-out; animation-delay: .5s; opacity: 0; background: #3991AE; color: #fff; font-size: 3rem; overflow: hidden; padding: 1rem 2rem; position: relative; text-align: center; } 範例 2：重新瀏覽網頁方可看到效果 Keyframes! ? 看原始碼：html css // html Keyframes! ? // css @keyframes show-background { 0% { transform: translate(-110%, 95%); } 50% { transform: translate(0, 95%); } 100% { transform: none; } } @keyframes pop-in { 0% { opacity: 0; transform: scale(.5); } 40% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } .demo2 { color: #fff; font-size: 3rem; overflow: hidden; padding: 1rem 2rem; position: relative; text-align: center; } .demo2:before { animation: show-background 1s .5s cubic-bezier(0, .9, .3, 1) forwards; background: #3991AE; bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; transform: translate(-110%, 95%); } .demo2 span { animation: pop-in .5s 1.4s cubic-bezier(0, .8, .4, 1.25) forwards; display: inline-block; transform: scale(1); opacity: 0; } .demo2 .text-part-1 { } .demo2 .text-part-2 { animation-delay: 1.6s; } 範例 3：重新瀏覽網頁方可看到效果 Three deee! ✨ 看原始碼：html css // html Three deee! ✨ // css @keyframes no-transform { 100% { transform: none; } } .centered { -webkit-transform-style: preserve3d; transform-style: preserve3d; -webkit-perspective: 800px; perspective: 800px; } .demo3 { animation: no-transform 1s .5s cubic-bezier(0, .1, .5, 1.5) forwards; background: #3991AE; color: #fff; font-size: 2rem; padding: 1rem 1.5rem; position: relative; text-align: center; transform: rotateX(-90deg); } 範例 4：(套用多個 keyframes)重新瀏覽網頁方可看到效果 Surprise 看原始碼：html css // html Surprise // css @keyframes setup{ 0% { opacity: 0; } 75% { opacity: 1; transform: none; } 100% { opacity: 1; transform: rotateZ(5deg); } } @keyframes dance{ 0% { transform: rotateZ(5deg); } 50% { transform: rotateZ(-5deg); } 100% { transform: rotateZ(5deg); } } .demo4_multiple { animation: setup 2s ease-out, dance 1s 2s cubic-bezier(0, .8, .5, 1.5) infinite; background: #3991AE; color: #fff; font-size: 2rem; padding: 1rem 1.5rem; position: relative; text-align: center; transform: rotateX(-90deg); } 若覺得文章有幫助，請多分享，讓其他同好也能吸收網站技能知識。 Tweet