怎么在CSS3中使用Animation動(dòng)畫屬性

發(fā)布時(shí)間：2021-04-01 16:51:46 來源：億速云閱讀：158 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么在CSS3中使用Animation動(dòng)畫屬性，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

要使用animation動(dòng)畫，先要熟悉一下keyframes,Keyframes的語法規(guī)則:命名是由”@keyframes”開頭，后面緊接著是這個(gè)“動(dòng)畫的名稱”加上一對(duì)花括號(hào)“{}”，括號(hào)中就是一些不同時(shí)間段樣式規(guī)則。不同關(guān)鍵幀是通過from（相當(dāng)于0%）、to（相當(dāng)于100%）或百分比來表示（為了得到最佳的瀏覽器支持，建議使用百分比），如下定義一個(gè)簡單的動(dòng)畫：

@keyframes myfirst /*定義動(dòng)畫名*/  
    {   
    0%   {background:red; left:0px; top:0px;} /*定義起始幀樣式，0%可以換成from*/  
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;} /*定義結(jié)束幀樣式，100%可以換成to*/  
    }

@keyframes定義好了，要使其能發(fā)揮效果，必須通過animation把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。下面列出了animation的屬性：

怎么在CSS3中使用Animation動(dòng)畫屬性

下面設(shè)置上述的所有屬性

CSS Code復(fù)制內(nèi)容到剪貼板

animation-name:myfirst;   
animation-duration:5s;   
animation-timing-function:linear;   
animation-delay:1s;   
animation-iteration-count:infinite;   
animation-direction:alternate;   
animation-play-state:running;

上述所有代碼可以如下簡寫：

CSS Code復(fù)制內(nèi)容到剪貼板

animation:myfirst 5s linear 2s infinite alternate;
animation-play-state:running;

瀏覽器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 規(guī)則和 animation 屬性。

Chrome 和 Safari 需要前綴 -webkit-。

注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>animation演示</title>  
    <style>    
    div   
    {   
    width:100px;   
    height:100px;   
    background:red;   
    position:relative;   
    animation-name:myfirst;   
    animation-duration:5s;   
    animation-timing-function:linear;   
    animation-delay:1s;   
    animation-iteration-count:infinite;   
    animation-direction:alternate;   
    animation-play-state:running;   
    /* Safari and Chrome: */   
    -webkit-animation-name:myfirst;   
    -webkit-animation-duration:5s;   
    -webkit-animation-timing-function:linear;   
    -webkit-animation-delay:1s;   
    -webkit-animation-iteration-count:infinite;   
    -webkit-animation-direction:alternate;   
    -webkit-animation-play-state:running;   
    }   
  
    @keyframes myfirst /*定義動(dòng)畫名*/   
    {   
    0%   {background:red; left:0px; top:0px;} /*定義起始幀樣式，0%相當(dāng)于from*/   
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;} /*定義結(jié)束幀樣式，100%相當(dāng)于to*/   
    }   
  
    @-webkit-keyframes myfirst /* Safari and Chrome */   
    {   
    0%   {background:red; left:0px; top:0px;}   
    25%  {background:yellow; left:200px; top:0px;}   
    50%  {background:blue; left:200px; top:200px;}   
    75%  {background:green; left:0px; top:200px;}   
    100% {background:red; left:0px; top:0px;}   
    }   
    </style>  
</head>  
<body>  
    <p>該實(shí)例在 Internet Explorer 9 及更早 IE 版本是無效的。</p>  
    <div></div>  
</body>  
</html>

上述內(nèi)容就是怎么在CSS3中使用Animation動(dòng)畫屬性，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么在CSS3中使用Animation動(dòng)畫屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽