首頁  >  文章  >  web前端  >  CSS3中使用@keyframes創建動畫,實例講解

CSS3中使用@keyframes創建動畫,實例講解

yulia
yulia原創
2018-09-07 14:28:033119瀏覽

動畫屬性可以逐漸地從一個值變化到另一個值,例如尺寸大小、數量、百分比和顏色。使用@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;}
}

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


以上是CSS3中使用@keyframes創建動畫,實例講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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