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

ThreeWords 發(fā)布于2019-08-29 16:05 / 1675人閱讀

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

前言

上一篇 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 的源碼目錄中，也根據(jù)其分類分為了 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 基礎類設置了動畫的播放次數(shù)為無限次

.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 類，就可以使元素具有 “閃爍” 的動畫效果！

總結(jié)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/113512.html

css3 動畫（三）animation 簡介

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

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

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

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

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

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

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

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

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

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