亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3中的@keyframes關(guān)鍵幀動畫的選擇器綁定

segmentfault   發(fā)布時間：2016-06-13 11:12:49   作者： trigkit4   我要評論
@keyframes可以幫助我們進行類似Flash中的關(guān)鍵幀動畫制作,這里我們來簡單討論一下CSS3中的@keyframes關(guān)鍵幀動畫的選擇器綁定,需要的朋友可以參考下

在css3中，我們可以通過@keyframes創(chuàng)建關(guān)鍵幀動畫效果。我們需要將@keyframes綁定到選擇器中，否則不會有效果出現(xiàn)。同時，我們還需定義動畫時長和動畫名稱

語法

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes animationname {keyframes-selector {css-styles;}}  

值 描述
animationname 必需。定義動畫的名稱。
keyframes-selector 必需。動畫時長的百分比。

在css3中，我們以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。其中，0% 是動畫的開始時間，100% 動畫的結(jié)束時間。

Keyframe選擇器
讓我們在@keyframes中添加一些動畫規(guī)則：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes sunrise {   
  2.    0% {   
  3.       bottombottom: 0;   
  4.       left: 340px;   
  5.       background: #f00;   
  6.    }   
  7.   
  8.    33% {   
  9.       bottombottom: 340px;   
  10.       left: 340px;   
  11.       background: #ffd630;   
  12.    }   
  13.   
  14.    66% {   
  15.       bottombottom: 340px;   
  16.       left: 40px;   
  17.       background: #ffd630;   
  18.    }   
  19.   
  20.    100% {   
  21.       bottombottom: 0;   
  22.       left: 40px;   
  23.       background: #f00;   
  24.    }   
  25. }  

通過添加這些新的動畫規(guī)則，我們引入了keyframe選擇器。在上述示例代碼中，0%, 33%, 66%, 以及100%即為keyframe選擇器。其中，0%和100%可以使用”from”和”to”來代替。
示例中的四套動畫規(guī)則表達的是這個動畫元素的四種狀態(tài)(四個關(guān)鍵幀)，以及處于這四種狀態(tài)中時的樣式。那些沒有定義的狀態(tài)(比如，從34%到65%)則組成了這些已定義的狀態(tài)間的過渡狀態(tài)。
盡管規(guī)范還在修改中，有一些規(guī)則用戶還是應(yīng)該遵守。例如，keyframes的書寫順序并不重要，它們會按百分數(shù)的升序播放。因此，如果你把”to”關(guān)鍵幀放在”from”關(guān)鍵幀之前，動畫的播放并不會有改變。除此以外，如果你沒有指定to或者from或者對應(yīng)的百分數(shù)，瀏覽器會自動加上。所以，@keyframes的語法并不符合一般CSS語法的層疊覆蓋規(guī)則。

相關(guān)文章

  • 詳解CSS動畫屬性關(guān)鍵幀keyframes全解析

    這篇文章主要介紹了詳解CSS動畫屬性關(guān)鍵幀keyframes全解析的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-09

  • CSS3 @keyframes簡單動畫實現(xiàn)

    這篇文章主要介紹了CSS3 @keyframes簡單動畫實現(xiàn)的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-24

  • @keyframes規(guī)則實現(xiàn)多重背景的CSS動畫

    這篇文章主要介紹了@keyframes規(guī)則實現(xiàn)多重背景的CSS動畫,代碼中使用的是效果圖中顯示的素材,僅作為腳本示例在此便不提供下載了,需要的朋友可以參考下
    2015-08-05

  • CSS3 中的@keyframes介紹

    CSS3新增動畫屬性“@keyframes”，從字面就可以看出其含義——關(guān)鍵幀，這與Flash中的含義一致。利用CSS3制作動畫效果其原理與Flash一樣，我們需要定義關(guān)鍵幀處的狀態(tài)效果，
    2014-09-02

  • 快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)

    這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以
    2020-02-25

最新評論