CSS3中使用@keyframes建立動畫,執行個體講解

來源:互聯網
上載者:User
動畫屬性可以逐漸地從一個值變化到另一個值,比如尺寸大小、數量、百分比和顏色。使用@keyframes可以建立動畫,建立動畫是通過逐步改變從一個CSS樣式設定到另一個。動畫在工作中用的也很多,接下來給大家介紹動畫的使用方法。

一、@keyframes 文法規則
在動畫過程中,可以多次更改CSS樣式。指定的變化發生時使用%,或關鍵字"from"和"to",這和0%到100%相同。0%是開頭動畫,100%是當動畫完成。為了獲得最佳的瀏覽器支援,應該始終定義為0%和100%的選取器。

@keyframes就是個動畫,可以理解成多個transform組成的一個組。
文法:
@keyframes 動畫名 {
from{ css1}
to{ css2 }
}

@keyframes 動畫名{
0% {css1}
50% {css2}
100% {css3}
}
註:使用animation屬性來控制動畫的外觀,還使用選取器綁定動畫。

二、animation屬性值

當調用這個動畫時用animation ,animation由六個屬性群組成:

animation-name 指定要綁定到選取器的主要畫面格的名稱
animation-duration 動畫指定需要多少秒或毫秒完成
animation-timing-function 設定動畫將如何完成一個周期
animation-delay 設定動畫在啟動前的延遲間隔
animation-iteration-count 定義動畫的播放次數
animation-direction 指定是否應該輪流反向播放動畫
animation : 動畫名 時間 速度曲線 開始的時候延遲 播放次數 輪流反向播放
舉個例子看看:

讓正方形從左上方向右上方再向右下角到左下角最後回到左上方,並且顏色也會隨之變化

div{animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari and Chrome */}@keyframes mymove{ 0%   {top:0px; left:0px; background:red;} 25%  {top:0px; left:100px; background:blue;} 50%  {top:100px; left:100px; background:yellow;} 75%  {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;}}@-webkit-keyframes mymove /* Safari and Chrome */{ 0%   {top:0px; left:0px; background:red;} 25%  {top:0px; left:100px; background:blue;} 50%  {top:100px; left:100px; background:yellow;} 75%  {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;}}

以上內容介紹了動畫的使用方法,大家還需要自己動手,多敲敲,試試不同的效果!

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。