css3 動畫（三）animation 簡介

itvincent 發布于2019-08-29 16:05 / 2475人閱讀

摘要：默認，只執行一次動畫動畫名稱，該名稱為動畫關鍵幀的名稱。默認如何理解表示的是關鍵幀的名稱，那么如何定義關鍵幀呢使用。語法名稱關鍵幀樣式或總結其實也并不復雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認識

前言

上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animation。

animation

css3 中的 animation 屬性是一系列配置的簡寫形式，其子屬性有：

animation-delay：動畫開始時的延遲時間。默認 0s，無延時

animation-direction：動畫是否反向播放。默認 normal，表示動畫結束之后，回到起點狀態

animation-duration：動畫時長。默認 0s，無動畫

animation-iteration-count：動畫重復次數。默認 1，只執行一次動畫

animation-name：動畫名稱，該名稱為動畫關鍵幀的名稱。默認 none

animation-play-state：動畫狀態，即是處于播放還是暫停狀態。默認 running，為播放狀態

animation-timing-function：動畫速度。默認 ease

animation-fill-mode：指定在動畫執行之前和之后如何給動畫的目標應用樣式。默認 none 如何理解？

animation-name

animation-name 表示的是關鍵幀的名稱，那么如何定義關鍵幀呢？使用 @keyframes。

@keyframes

@keyframes 是定義 css3 animation 動畫的關鍵所在。通過定義每一幀的樣式狀態，比 transition 能更好地控制中間過程。假如說 transition 只能定義 “兩幀” 的狀態，則 animation 可以定義 “n幀（n >= 2）” 的狀態。

語法

“@keyframes + 名稱 { // 關鍵幀樣式... }”

@keyframes move {
  from { width: 100px; }
  to { width: 200px; }
}
/* 或 */
@keyframes move {
  0% { width: 100px; }
  100% { width: 200px; }
}

總結

其實 animation 也并不復雜，其有 8 個子屬性。

下一篇：css3 動畫（三）animation.css 源碼解析（通過閱讀 animation.css 動畫庫的源碼，來提高對 css3 中 animation 屬性的認識）

云服務器 GPU云服務器 css3動畫高性能css3動畫云機三廠簡介 animated

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113513.html

css3 動畫（四）animation.css 源碼分析

摘要：前言上一篇動畫三簡介中只是簡單的介紹了一下的子屬性，并沒有真正的使用。在本篇中，通過閱讀這個的動畫庫，來加深對的屬性的理解。是一個具有非常多的動畫效果的動畫庫。動畫效果演示用法加上基礎類以及動畫類，就會有閃爍的動畫效果。前言上一篇 css3 動畫（三）animation 簡介中只是簡單的介紹了一下 animation 的子屬性，并沒有真正的使用。在本篇中，通過閱讀 animate...

ThreeWords 2019-08-29 16:05 評論0 收藏0
前端動畫調研-V1

摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...

ddongjian0000 2019-08-23 11:00 評論0 收藏0
css3效果： animate實現點點點loading動畫效果（一）

摘要：規定動畫完成一個周期所花費的秒或毫秒。等同于貝塞爾曲線平滑過渡。等同于貝塞爾曲線由慢到快再到慢。等同于貝塞爾曲線等同于等同于接受兩個參數的步進函數。特定的貝塞爾曲線類型，個數值需在區間內規定動畫何時開始。實現如圖所示的點點點loading效果：showImg(https://segmentfault.com/img/bVM22d?w=146&h=46); 一：CSS3 animati...

lijy91 2019-08-29 12:30 評論0 收藏0
css3 動畫（二）貝塞爾曲線

摘要：根據方程的最高階數，可以分為線性貝塞爾曲線二次貝塞爾曲線三次貝塞爾曲線以及更高次的貝塞爾曲線。貝塞爾曲線掃盲在中使用的函數，是一個三次貝塞爾曲線函數。三次貝塞爾曲線中四個點，在中第一個點和最后一個點是固定坐標的和是傳入函數中的參數的。前言上一篇 css3 動畫（一） transition 中，介紹了 transition 的用法。其中 transition 包含四個可設置的屬性： ...

soasme 2019-08-30 15:54 評論0 收藏0
CSS3-Animotion抽絲剝繭一步步擼出跑男動畫

摘要：通過剖析一個跑男動畫實例，來把中動畫相關的知識點抽絲剝繭，一網打盡。跑男的動畫其實可以拆分為兩個一個是交替擺腿另一個是位置移動。在使用改變雪碧圖時，得到效果這樣的平滑過度顯然不是我們想要的。所以，在切換雪碧圖背景的方案下，就要派上用場了。作為一名真正的前端開發者，我們不能只關注前端邏輯部分。畢竟水銀泄地般的頁面設計和炫酷逼真的動畫效果，是我們區別于其他程序員所特有的優勢之一。盡量百...

caoym 2019-08-21 11:39 評論0 收藏0