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

ThreeWords 發布于2019-08-29 16:05 / 1602人閱讀

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

前言

上一篇 css3 動畫（三）animation 簡介中只是簡單的介紹了一下 animation 的子屬性，并沒有真正的使用。在本篇中，通過閱讀 animate.css這個 css 的動畫庫，來加深對
css3 的 animation 屬性的理解。

animate.css

animate.css 是一個具有非常多的動畫效果的 css 動畫庫。動畫效果演示

用法

Example

加上基礎類 animated 以及動畫類 flash，就會有 “閃爍” 的動畫效果。

動畫分類

通過查看演示，可以看到該動畫庫的動畫類型分為 14 類：

Attention Seekers

Bouncing Entrances

Bouncing Exits

Fading Entrances

Fading Exits

Flippers

Lightspeed

Rotating Entrances

Rotating Exits

Sliding Entrances

Sliding Exits

Specials

Zooming Entrances

Zooming Exits

在 animate.css 的源碼目錄中，也根據其分類分為了 14 個文件夾：

_base.css 基礎類

首先看 _base.css 中的基礎類：

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  animation-delay: 1s;
}

.animated.delay-2s {
  animation-delay: 2s;
}

.animated.delay-3s {
  animation-delay: 3s;
}

.animated.delay-4s {
  animation-delay: 4s;
}

.animated.delay-5s {
  animation-delay: 5s;
}

可以看到：
.animate 基礎類設置了動畫的兩個子屬性：animation-duration 和 animation-fill-mode。其值分別為 1s 和 both。animation-fill-mode 詳解

.animate.infinite 基礎類設置了動畫的播放次數為無限次

.animated.delay-ns 基礎類設置了動畫的延時

示例：flash 動畫源碼

然后，我們來看一個動畫例子的源碼：flash.css

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

在 flash.css 中，首先定義了名為 flash 的關鍵幀的序列：

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

在 0%、50%、100% 關鍵幀中，其樣式 opacity 為 0
在 25%、75% 關鍵幀中，其樣式 opacity 為 1

然后，下面有 .flash 類，使用了 flash 作為 animation-name 屬性的值，flash 即為上面定義關鍵幀的名稱

所以，通過添加 flash 類，就可以使元素具有 “閃爍” 的動畫效果！

總結

通過上面實例的一個 flash 動畫源碼的閱讀，加深了對 css3 animation 屬性的使用。

GPU云服務器云服務器 css3動畫高性能css3動畫源碼分析 nginx源碼分析

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

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

css3 動畫（三）animation 簡介

摘要：默認，只執行一次動畫動畫名稱，該名稱為動畫關鍵幀的名稱。默認如何理解表示的是關鍵幀的名稱，那么如何定義關鍵幀呢使用。語法名稱關鍵幀樣式或總結其實也并不復雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認識前言上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animati...

itvincent 2019-08-29 16:05 評論0 收藏0
css:transform,transition,animation總結

摘要：等同于貝塞爾曲線元素樣式從初始狀態過渡到終止狀態速度是恒速。等同于貝塞爾曲線提供了類似關鍵幀控制的動畫效果，通過屬性實現。名稱說明用來指定一個關鍵幀動畫的名稱，這個動畫名必須對應一個規則。 1. transform 2d 名稱說明 transform 變形功能 transform-orign 指定變換起點 1.1 transform的屬性值名稱說明參數 ...

sevi_stuo 2019-08-30 15:53 評論0 收藏0
CSS3 Transition, transform 和 animation 介紹

摘要：和介紹允許的屬性值在一定的時間區間內平滑地過渡，語法如下用來指定執行效果的屬性，可以為或者特定的屬性。縮放的取值范圍是，小于時表示縮小，反之表示放大。 CSS3 提供了transition 過渡、transform 變換和animation 動畫來實現頁面中的一些樣式轉化，這篇文章會對這幾個屬性做簡單的介紹，然后比較一下 CSS3 動畫和 JS 動畫哪個性能更好。 Transitio...

wums 2019-08-22 11:50 評論0 收藏0
css面試題

摘要：目前，除了及更早版本外，所有瀏覽器均已支持。視口單位中的視口，桌面端指的是瀏覽器的可視區域移動端指的就是中的。根據規范，視口單位主要包括以下個等于視口寬度的。等于視口高度的。生成相對定位的元素，相對于其正常位置進行定位。 css面試題 css垂直居中的方法有哪些？已知高度的塊級子元素，采用絕對定位和負邊距.container { position: relative;}.verti...

longmon 2019-08-23 18:30 評論0 收藏0
A Beginner’s Introduction to CSS Animation中文版

摘要：示例或者簡寫上面的代碼將實現一個元素不透明度的過度，從到。接著，給添加默認的樣式定義現在，我們來創建一個有五個階段的應用動畫定義完我們的動畫，我們還需要將動畫應用到上現在動畫的狀態是動畫名稱為。現在越來越多的網站正在使用動畫，無論是以GIF，SVG，WebGL，背景視頻等形式。當正確使用時，網絡上的動畫帶來生機和交互性，為用戶增添了額外的反饋和體驗。在本教程中，我將向您介紹CSS...

_DangJin 2019-08-29 12:26 評論0 收藏0