成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

css3 動(dòng)畫(huà)（四）animation.css 源碼分析

ThreeWords / 1615人閱讀

摘要：前言上一篇?jiǎng)赢?huà)三簡(jiǎn)介中只是簡(jiǎn)單的介紹了一下的子屬性，并沒(méi)有真正的使用。在本篇中，通過(guò)閱讀這個(gè)的動(dòng)畫(huà)庫(kù)，來(lái)加深對(duì)的屬性的理解。是一個(gè)具有非常多的動(dòng)畫(huà)效果的動(dòng)畫(huà)庫(kù)。動(dòng)畫(huà)效果演示用法加上基礎(chǔ)類(lèi)以及動(dòng)畫(huà)類(lèi)，就會(huì)有閃爍的動(dòng)畫(huà)效果。

前言

上一篇 css3 動(dòng)畫(huà)（三）animation 簡(jiǎn)介 中只是簡(jiǎn)單的介紹了一下 animation 的子屬性，并沒(méi)有真正的使用。在本篇中，通過(guò)閱讀 animate.css這個(gè) css 的動(dòng)畫(huà)庫(kù)，來(lái)加深對(duì)
css3 的 animation 屬性的理解。

animate.css

animate.css 是一個(gè)具有非常多的動(dòng)畫(huà)效果的 css 動(dòng)畫(huà)庫(kù)。動(dòng)畫(huà)效果演示

用法 
Example

加上基礎(chǔ)類(lèi) animated 以及動(dòng)畫(huà)類(lèi) flash，就會(huì)有 “閃爍” 的動(dòng)畫(huà)效果。

動(dòng)畫(huà)分類(lèi)

通過(guò)查看 演示，可以看到該動(dòng)畫(huà)庫(kù)的動(dòng)畫(huà)類(lèi)型分為 14 類(lèi)：

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ù)其分類(lèi)分為了 14 個(gè)文件夾：

_base.css 基礎(chǔ)類(lèi)

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

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

.animate.infinite 基礎(chǔ)類(lèi)設(shè)置了動(dòng)畫(huà)的播放次數(shù)為無(wú)限次

.animated.delay-ns 基礎(chǔ)類(lèi)設(shè)置了動(dòng)畫(huà)的延時(shí)

示例：flash 動(dòng)畫(huà)源碼

然后，我們來(lái)看一個(gè)動(dòng)畫(huà)例子的源碼：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 類(lèi)，使用了 flash 作為 animation-name 屬性的值，flash 即為上面定義關(guān)鍵幀的名稱(chēng)

所以，通過(guò)添加 flash 類(lèi)，就可以使元素具有 “閃爍” 的動(dòng)畫(huà)效果！

總結(jié)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113512.html

相關(guān)文章

  • css3 動(dòng)畫(huà)（三）animation 簡(jiǎn)介

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

    itvincent 評(píng)論0 收藏0

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

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

    sevi_stuo 評(píng)論0 收藏0

  • CSS3 Transition, transform 和 animation 介紹

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

    wums 評(píng)論0 收藏0

  • css面試題

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

    longmon 評(píng)論0 收藏0

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

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

    _DangJin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<