關於CSS3中Animation動畫屬性的用法解析

最後更新：2018-06-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章主要為大家詳細介紹了CSS3中Animation動畫屬性用法，教大家如何使用animation動畫，感興趣的小夥伴們可以參考一下

要使用animation動畫，先要熟悉一下keyframes,Keyframes的文法規則:命名是由”@keyframes”開頭，後面緊接著是這個“動畫的名稱”加上一對花括弧“{}”，括弧中就是一些不同時間段樣式規則。不同主要畫面格是通過from（相當於0%）、to（相當於100%）或百分比來表示（為了得到最佳的瀏覽器支援，建議使用百分比），如下定義一個簡單的動畫：

@keyframes myfirst /*定義動畫名*/    {       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;} /*定義結束幀樣式，100%可以換成to*/    }

@keyframes定義好了，要使其能發揮效果，必須通過animation把它綁定到一個選取器，否則動畫不會有任何效果。下面列出了animation的屬性：

下面設定上述的所有屬性

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

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

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

瀏覽器安全色性

Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要首碼 -webkit-。

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

下面給出上面介紹的關於keyframes和animation屬性的完整程式碼範例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>animation示範</title>    <style>    p       {       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 /*定義動畫名*/       {       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;} /*定義結束幀樣式，100%相當於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>該執行個體在 Internet Explorer 9 及更早 IE 版本是無效的。</p>    <p></p></body></html>

上面代碼示範了一個正方形沿著一個正方形軌跡運動，基數次按正方向運動，偶數次按反方向運動，運動過程中還帶有顏色變化。具體效果，讀者可以自行運行代碼觀察。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More