animation初體驗,

來源:互聯網
上載者:User

animation初體驗,

其實寫了這麼多項目,自己還沒真正的接觸到css3中的動畫,剛好藉著今天有時間就簡單的瞭解一下這個animation屬性,也為以後寫動畫做好準備。

要想瞭解animation就得Crowdsourced Security Testing道@keyframes
@keyframes規則是建立動畫。 @keyframes規則內指定一個css樣式和動畫將逐步從目前的樣式更改為新的樣式。

前提

學習animation的前提是知道他的一些屬性以及屬性所代表的含義:

屬性 描述 CSS
@keyframes 規定動畫。 3
animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。 3
animation-name 規定 @keyframes 動畫的名稱。 3
animation-duration 規定動畫完成一個周期所花費的秒或毫秒。預設是 0。 3
animation-timing-function 規定動畫的速度曲線。預設是 “ease”。 3
animation-delay 規定動畫何時開始。預設是 0。 3
animation-iteration-count 規定動畫被播放的次數。預設是 1。 3
animation-direction 規定動畫是否在下一周期逆向地播放。預設是 “normal”。 3
animation-play-state 規定動畫是否正在運行或暫停。預設是 “running”。 3
執行個體
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>nimation簡單研究</title>    <style>        .box{            width:100px;            height:100px;            background:gray;            margin:50px;            position:relative;            animation:myfirst 5s infinite linear alternate;        }        @keyframes myfirst        {        0%   {left:0px;}        100% {left:200px;}        }    </style></head><body>    <div class="box">    </div></body></html>

還要做什麼複雜的動畫的話可以自己琢磨了!(溜了溜了)

0
0
    查看評論

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.