搞定css3的動畫 一

2021-07-25 13:01:31 字數 3412 閱讀 2278

在html5中，改變是相當大的，尤其是動畫了。咱這裡只說動畫，不說其他元素。

只談風月，不談政治。只為幫組學習css動畫。

對前端開發來說，css動畫最令人激動的事情之一是，我們可以非常輕鬆地使用我們已經熟悉的工具來把它們新增進我們的專案中。如果您已經精通html和css，您就不需要學習新的語言或外掛程式來為您的專案新增動態效果了。html和css已經足夠，這是乙個非常大的加分！無論你只是新增一點點引人注目的設計細節，還是新增非常多的動畫，都沒有問題。

css的transitions屬性。我們重點講css動畫規範。

本文會給你足夠的css動畫入門的內容，足以讓你變得更有創造力！

1. @keyframes 定義執行動畫

// 這裡是寫動畫定義，這裡的[driver]就是動畫名稱


@keyframes drive
在這裡就是動畫的執行**，俗話說就是動畫開始到動畫結束、還有就是動畫執行過程中的情況了。

看到這裡，此時此刻你是否有點想法來代替這種情況。沒錯就是from和to也可表示動畫開始到動畫結束。

@keyframes drive 


to}
在大多時候這種情況是不能滿足我們的需求的，最合適就是用百分比來使用，0%和100%這樣的使用更合適。

於是乎

@keyframes drive 


100% 


}
如果你樂意還可以多寫幾個在過程中的比例位址。就看你需求了。這有很大的靈活性可以給關鍵幀分組，以便以後再檢視。

2. 給html元素賦值動畫animation-name

第乙個屬性是animation-name，給關鍵幀動畫說明的動畫名稱

animation-name:gudian


;
第二個屬性是animation-duration，給關鍵幀動畫設定動畫執行時間

animation-duration:1s


;
第三個屬性是animation-timing-function，給關鍵幀動畫設定動畫展現形式，預設為：ease

1. ease-in


2. ease-out


3. ease-in-out


animation-timing-function: linear;
第三個屬性是animation-iteration-count，給關鍵幀動畫設定重複次數：預設為：1

infinite:定義為一直執行

animation-iteration-count:1


;
第三個屬性是animation-fill-mode，給關鍵幀動畫設定最後停留位置,預設為:none

forwards

backwards

animation-fill-mode:both


;
3. 建立x軸平移動畫notice:我們在給html元素賦值給的name要記住他的名字，然後開始用@-webkit-keyframes寫動畫動容
@-webkit-keyframes trans*** 


50%100%


}
這裡我們設定了他的x軸移動的位置，起始點，中點，和終點分別到的位置點。這裡的動畫名字是trans***。 4. 建立縮放動畫
@-webkit-keyframes trans*** 


100%


}
5. 建立旋轉動畫

@-webkit-keyframes trans*** 


100%


}
5. 建立組合動畫-邊旋轉和邊縮放
@-webkit-keyframes trans***


100%


}
notice:申明動畫我們可以用乙個簡單的方式

animation: trans*** 1


s ease-out 0s infinite backwards;


引數說明 `動畫名稱`


`執行時間`


`執行方式`


`動畫延遲時間`


`動畫重複次數`


`最後停留位置`
我的html**
lang="en">


charset="utf-8">


css動畫title>


.car


@-webkit-keyframes drive 


50%100%


/*0% 


100% */


}/*鼓點*/


.gudian


@-webkit-keyframes gudian */


/*100%*/


0%100%


}.gudian:before 


/*燈籠*/


.***


@-webkit-keyframes trans***


100%


}.music


@-webkit-keyframes plays


100%


}@-webkit-keyframes playsup


25% 


60% 


100% 


} 


style>


head>


class="car">


div>


class="gudian">


div>


class="***">


div>


class="music">


div>


body>


html>如有問題可新增我的qq：1290925041


還可新增qq群:234812704（洲洲哥學院）


歡迎各位一塊學習，提高逼格！ 


這裡寫描述

CSS3 動畫一瞥

再加上html5將很多之前需要依賴外部程式或者需要程式設計師們寫大量js來實現的東西標準化了，乙個目的就是豐富web設計，徹底丟棄第三方外掛程式，讓瀏覽器乾乾淨淨。扯遠了，回到動畫。在css3中定義動畫是件很方便的事情。原理有點像使用adobe公司的flash軟體來製作動畫。我還記得那時我在把玩fl...

CSS3 動畫一瞥

再加上html5將很多之前需要依賴外部程式或者需要程式設計師們寫大量js來實現的東西標準化了，乙個目的就是豐富web設計，徹底丟棄第三方外掛程式，讓瀏覽器乾乾淨淨。扯遠了，回到動畫。在css3中定義動畫是件很方便的事情。原理有點像使用adobe公司的flash軟體來製作動畫。我還記得那時我在把玩fl...

css3中變形與動畫（一）

css3製作動畫的幾個屬性 變形 transform 過渡 transition 和動畫 animation 首先介紹transform變形。transform英文意思 改變，變形。css3中transform主要包括以下幾種 旋轉 rotate 扭曲 skew 縮放 scale 移動 transl...