CSS常用樣式（四）之animation-html教學-PHP中文網

首頁

web前端

html教學

CSS常用樣式（四）之animation

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 18, 2016 am 08:58 AM

　　上篇CSS常用樣式（三）這篇博文中已經介紹過了CSS中具有動畫效果的transition、transform，今天來大概說說CSS中的animation。 animation的加入會使得動畫效果更加樂觀。

　　animation

　　 animation的實作需要透過keyframes來實現。 keyframes（關鍵影格），類似flash當中的關鍵影格。關鍵影格有自己的語法規則，他的命名是由"@keyframes"開頭，後面緊接著是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如“0%”到"100%"之間，我們可以在這個規則中創建多個百分比，我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果，比如說移動，改變元素顏色，位置，大小，形狀等。不過有一點要注意的是，我們可以使用「fromt」「to」來代表一個動畫是從哪開始，到哪結束，也就是說這個"from"就相當於"0%"而"to"相當於"100%",值得一說的是，其中"0%"不能像別的屬性取值一樣把百分比符號省略，我們在這裡必須加上百分符號（“%”）如果沒有加上的話，我們這個keyframes是無效的，不起任何作用。因為keyframes的單位只接受百分比值。

　　不同瀏覽器下的寫法：　　

內核型	寫法
Webkit(Chrome/Safari)	-webkit-animation
Gecko(Firefox)	-moz-animation
Presto(Opera)
Trident(IE)	-ms-animation
W3C	animation

　　屬性說明：

　1、animation-name:檢索或設定物件所套用的動畫名稱,必須與規則@keyframes搭配使用。動畫名可自由取，語意化的更好

　2、animation-duration：檢索或設定物件動畫的持續時間

　3、animation-timing-function:檢索或設定物件動畫的過渡類型

　　取值：

　　linear：線性過渡。等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0)

　　ease：平滑過渡。等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0)

　　ease-in：由慢到快。等同於貝塞爾曲線(0.42, 0, 1.0, 1.0)

　　ease-out：由快到慢。等同於貝塞爾曲線(0, 0, 0.58, 1.0)

　　ease-in-out：由慢到快再到慢。等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

　　cubic-bezier(, , , )：特定的貝塞爾曲線類型，4個數值需在[0, 1]區間內

　4、animation-iteration-count：檢索或設定物件動畫的循環次數

　　　　取值：

　　　　infinite：無限循環

　　　　number：指定物件動畫的特定循環次數

　5、animation-direction：檢索或設定物件動畫在循環中是否反向運動

　　　　取值：

　　　　normal：正常方向

　　　　alternate：正常與反向交替

　6、animation-play-state：檢索或設定物件動畫的狀態

　　　　running：運動

　　　　paused：暫停

　7、animation-fill-mode：檢索或設定物件動畫時間以外的狀態

　　　　取值：

　　　　none：預設值。不設定物件動畫以外的狀態

　　　　forwards：設定物件狀態為動畫結束時的狀態

　　　　backwards：設定物件狀態為動畫開始時的狀態

　　　　both：設定物件狀態為動畫結束或開始的狀態

　　下面舉個例子綜合說明：

　　CSS代碼：

<span style="font-family: 'Microsoft YaHei'; font-size: 15px;"><span style="color: #800000;">    #animation
            </span>{<span style="color: #ff0000;">
                width</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
                height</span>:<span style="color: #0000ff;"> 250px</span>;<span style="color: #ff0000;">
                background-color</span>:<span style="color: #0000ff;"> brown</span>;<span style="color: #ff0000;">
                opacity</span>:<span style="color: #0000ff;"> 0.5</span>;<span style="color: #ff0000;">
                position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;">                
                left</span>:<span style="color: #0000ff;">40%</span>;<span style="color: #ff0000;">
                overflow</span>:<span style="color: #0000ff;"> hidden</span>;
                
            }<span style="color: #800000;">
            #animation span
            </span>{<span style="color: #ff0000;">
                font-family</span>:<span style="color: #0000ff;"> "微软雅黑"</span>;<span style="color: #ff0000;">
                font-size</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
                color</span>:<span style="color: #0000ff;"> #ccc</span>;<span style="color: #ff0000;">
                opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
                display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
                margin</span>:<span style="color: #0000ff;"> 30px</span>;
                
            }<span style="color: #800000;">
            #text1:hover
            </span>{<span style="color: #ff0000;">
                -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;/*鼠标经过时暂停动画*/<span style="color: #ff0000;">
                -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -o-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -ms-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

            }<span style="color: #800000;">
            #text2:hover
            </span>{<span style="color: #ff0000;">
                -moz-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -webkit-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -o-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                -ms-animation-play-state</span>:<span style="color: #0000ff;">paused</span>;<span style="color: #ff0000;">
                animation-play-state</span>:<span style="color: #0000ff;">paused</span>;

            }<span style="color: #800000;">
            #text1
            </span>{<span style="color: #ff0000;">
                
                -webkit-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画名称</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-duration</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画持续时间</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">变化由慢到快</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">过了2S后开始动画</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">设置动画无限播放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 4s</span>;<span style="color: #ff0000;">
                animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                -ms-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                -ms-animation-duration</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -ms-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -ms-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -ms-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                -ms-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;<span style="color: #ff0000;">
                
                -moz-animation-name</span>:<span style="color: #0000ff;">animation1</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -moz-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -moz-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">    
                -moz-transform</span>:<span style="color: #0000ff;"> translate(55px)</span>;
            }<span style="color: #800000;">
            #text2
            </span>{<span style="color: #ff0000;">
                -webkit-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画名称</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-duration</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">动画持续时间</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">变化由慢到快</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">过了2S后开始动画</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">设置动画无限播放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
                -webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 4s</span>;<span style="color: #ff0000;">
                animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                -ms-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                -ms-animation-duration</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -ms-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -ms-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -ms-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">
                -ms-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">
                
                -moz-animation-name</span>:<span style="color: #0000ff;">animation2</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;">4s </span>;<span style="color: #ff0000;">
                -moz-animation-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
                -moz-animation-delay</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;">
                -moz-animation-iteration-count</span>:<span style="color: #0000ff;"> infinite</span>;<span style="color: #ff0000;">    
                -moz-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;        
                    
            }<span style="color: #800000;">
            @-webkit-keyframes animation1
            </span>{<span style="color: #ff0000;">
                0%{-webkit-transform</span>:<span style="color: #0000ff;"> translate(-10px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
                20%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(25px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.5</span>;}<span style="color: #800000;">
                45%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(45px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;}<span style="color: #800000;">
                100%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.8</span>;}<span style="color: #800000;">
                
            }
            @-webkit-keyframes animation2
            </span>{<span style="color: #ff0000;">
                0%{-webkit-transform</span>:<span style="color: #0000ff;"> translate(280px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0</span>;}<span style="color: #800000;">
                30%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(200px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 0.5</span>;}<span style="color: #800000;">
                65%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(130px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;"> 1</span>;}<span style="color: #800000;">                
                100%</span>{<span style="color: #ff0000;">-webkit-transform</span>:<span style="color: #0000ff;"> translate(60px)</span>;<span style="color: #ff0000;">opacity</span>:<span style="color: #0000ff;">0.8</span>;}<span style="color: #800000;">
            }</span></span>

　　HTML代码：　

<span style="font-family: 'Microsoft YaHei'; font-size: 16px;"><span style="color: #000000;"><div id="animation">
    <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text1"</span><span style="color: #0000ff;">></span>这是ly婠婠的博客<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="text2"</span><span style="color: #0000ff;">></span>欢迎访问和评论！<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>            
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
</span>
</div>
<p><span style="font-family: 'Microsoft YaHei';">效果如下：</span></p>
<div id="animation"><span style="font-family: 'Microsoft YaHei';"><span id="text1"><img src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/808020/201608/808020-20160815205235765-1770859611.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""></span></span></div>
<p><span style="font-family: 'Microsoft YaHei'; font-size: 16px;">解析说明：</span></p>
<p><span style="font-family: 'Microsoft YaHei'; font-size: 16px;">在这个例子中，效果如上图。这里主要是利用animation和translate来达到一个文字渐进的效果。translate的作用是让文字根据给定值发生平移。animation则利用关键帧和百分比数值来将平移过程细分成几个帧，然后设置持续时间，一帧帧连接起来形成动画。</span></p></span></span>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles