91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css3動畫之transition和animation屬性有什么用

發布時間:2021-01-25 11:01:16 來源:億速云 閱讀:206 作者:小新 欄目:web開發

這篇文章主要介紹了css3動畫之transition和animation屬性有什么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

tradition一共以下有4個屬性:

  • transition-property 過渡屬性

  • transition-duration 完成動畫所需時間,以秒或者毫秒計算

  • transition-timing-function 規定動畫變化速度曲線

  • transition-delay 是否延時

transition-property 過渡屬性

none:沒有屬性會獲得過渡效果

all:所有屬性會獲得過渡效果

porperty:width,height...

img{    
    height:15px;    
    width:15px;
}
img:hover{    
    height: 450px;    
    width: 450px;
}

transition的作用在于指定狀態變化所需要的時間。

img{
    transition: 1s;
}

transition-duration 完成狀態過渡的秒或者毫秒

還可以指定transition的變化屬性,例如是width變化還是height

img{
    transition: 1s height;
}

還可以指定多個屬性

img{
    transition: 1s height, 1s width
}

transition-delay 狀態變化速度。

指定delay參數,使得height先發生變化,然后在讓width發生變化:

img{
    transition: 1s height, 1s 1s width
}

delay 真正的意義在于指定了動畫發生的順序,使得多個不同的transition可以在不同的時刻發生形成一種動畫效果

transition-timing-function 狀態變化速度

默認的是逐漸放慢 ease

可能取值有

  • linear:勻速

  • easy-in:加速

  • ease-out:減速

  • cubic-bezier函數,自定義速度模式

(cubic:立方體的,bezier:貝塞爾曲線 )

cubic-bezier(<x1>, <y1>, <x2>, <y2>)取值范圍0-1

img{    
    transition-property: height;         
    transition-duration: 1s;    
    transition-delay: 1s;    
    transition-timing-function: ease;
}

注意:transition需要明確知道開始狀態和結束狀態的具體數值才能計算出中間狀態。但是transition沒法計算出0->auto的狀態,那么就不會產生動畫效果。類似情況還有display:none->block和background:url(foo.jpg)->url(bar.jpg)的情況。

它有的缺點:

  1. 需要事件觸發,沒法在網頁加載時候直接發生

  2. 是一次性的,不能重復發生,除非你重復觸發它

  3. 只能定義開始狀態和結束狀態,不能定義中間狀態

  4. 一個transition規則,只能定義一個屬性的變化

animation

CSS Animation一共有以下屬性:

  • animation-name 需要綁定到選擇器keyframe的名稱

  • animation-duration  完成動畫所需時間,以秒或者毫秒計算

  • animation-timing-function 規定動畫的速度曲線

  • animaton-delay  動畫開始之前延時的時間

  • animation-iteration-count  動畫應該播放的次數

  • animation-direction 是否應該輪流反向播放動畫

  • animation-fill-mode 屬性規定動畫播放之后其動態效果是否可見

  • animatoin-play-state 規定動畫正在運行還是暫停

iteration-重復

animation-name

animation-duration

首先 設置動畫的名稱和持續的時長

p:hover{
animation: 1s rainbow;
}

上面代碼表示,當鼠標懸停在p元素上時,會產生名為rainbow的動畫效果,持續時間為1秒。為此,我們還需要用keyframes關鍵字,定義rainbow效果。

@keyframs rainbow{
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}

keyframs的寫法相當自由

可以用from表示0%,to 表示100%

@keyframs rainbow{
from { background: #c00; }
50% { background: orange; }
to { background: yellowgreen; }
}

如果忽略某個狀態,瀏覽器會自動推算

@keyframs rainbow{
   50% { background: orange; }
     to { background: yellowgreen; }
}

@keyframs rainbow{
to { background: yellowgreen; }
}

@keyframs rainbow{
from, to { background: yellowgreen; }
}

瀏覽器從一個狀態到另外一個狀態是平滑過渡到,steps函數實現分步過渡

p:hover {
animation: 1s rainbow infinite steps(10);
}

默認情況下,動畫只播放一次。加入infinite關鍵字,可以讓動畫無限次播放。

p:hover{
animation: 1s rainbow infinite;
}

除了infinite,還可以設置為具體的次數: 3、5

p:hover{
animation: 1s rainbow 5;
}

animation-fill-mode

動畫結束以后會立即沖結束狀態回到起始狀態,如果想讓動畫保持在結束狀態就要加上animation-fill-mode屬性中的forwards

p:hover{
animation: 1s rainbow infinite forwards;
}

animation-fill-mode 有4種取值

none  不改變默認行為

forawads  動畫完成后,保持最后一個屬性(在最后一個關鍵幀中定義)

backwards  在 animation-delay 所指定的一段時間內,在動畫顯示之前,應用開始屬性值(在第一個關鍵幀中定義)。

both  向前向后都進行填充

animation-direction

規定了輪流反向播放動畫

alternate:動畫會在奇數次(1,3,5...)正常播放,偶數次(2,4,6...)反向播放

最常用alternate和revers,瀏覽器對其他值的支持不佳

<iframe 
width="100%" height="300" src="//jsfiddle.net/xiaoying/2414dr39/embedded/">
</iframe>

感謝你能夠認真閱讀完這篇文章,希望小編分享的“css3動畫之transition和animation屬性有什么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業資訊頻道,更多相關知識等著你來學習!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

三明市| 临澧县| 信宜市| 辉县市| 仁怀市| 天门市| 柳河县| 和龙市| 东辽县| 达州市| 石楼县| 沾化县| 三亚市| 保亭| 调兵山市| 常德市| 高州市| 广安市| 甘肃省| 宝应县| 井冈山市| 沂源县| 左云县| 常州市| 乾安县| 定兴县| 三河市| 无极县| 都江堰市| 莱西市| 台北县| 德保县| 嘉善县| 乌鲁木齐市| 丹棱县| 泗洪县| 江北区| 景东| 湖州市| 成都市| 格尔木市|