成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

ThreeWords / 1680人閱讀

摘要：前言上一篇?jiǎng)赢嬋喗橹兄皇呛唵蔚慕榻B了一下的子屬性，并沒有真正的使用。在本篇中，通過閱讀這個(gè)的動畫庫，來加深對的屬性的理解。是一個(gè)具有非常多的動畫效果的動畫庫。動畫效果演示用法加上基礎(chǔ)類以及動畫類，就會有閃爍的動畫效果。

前言

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

animate.css

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

用法 
Example

加上基礎(chǔ)類 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 個(gè)文件夾：

_base.css 基礎(chǔ)類

首先看 _base.css 中的基礎(chǔ)類：

.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 基礎(chǔ)類設(shè)置了動畫的兩個(gè)子屬性：animation-duration 和 animation-fill-mode。其值分別為 1s 和 both。animation-fill-mode 詳解

.animate.infinite 基礎(chǔ)類設(shè)置了動畫的播放次數(shù)為無限次

.animated.delay-ns 基礎(chǔ)類設(shè)置了動畫的延時(shí)

示例：flash 動畫源碼

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

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

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

.flash {
  animation-name: flash;
}

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

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

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

在 0%、50%、100% 關(guān)鍵幀中，其樣式 opacity 為 0
在 25%、75% 關(guān)鍵幀中，其樣式 opacity 為 1

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

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

總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/113512.html

相關(guān)文章

  • css3 動畫（三）animation 簡介

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

    itvincent 評論0 收藏0

  • css:transform,transition,animation總結(jié)

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

    sevi_stuo 評論0 收藏0

  • CSS3 Transition, transform 和 animation 介紹

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

    wums 評論0 收藏0

  • css面試題

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

    longmon 評論0 收藏0

  • A Beginner’s Introduction to CSS Animation中文版

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

    _DangJin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<