css3動畫之圓形運動軌跡，css3動畫軌跡

最後更新：2017-10-19 來源：互聯網

上載者：User

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

css3中通過@keyframes定義動畫，animation設定動畫屬性，從而實現動畫效果；

在animation屬性當中，可以規定動畫的名稱、整個動畫的已耗用時間、運動的速度曲線以及其延遲時間、播放次數等。

animation

animation作為一個複合屬性，包括了以下動畫屬性。

animation-name -------------------------------------規定動畫名稱
animation-duration ---------------------------------規定動畫完成一次的時間
animation-timing-function ----------------------規定動畫的運動速度曲線
animation-delay ------------------------------------規定動畫的延遲時間
animation-iteration-count -----------------------規定動畫的播放次數
animation-direction ------------------------------規定動畫下一周期是否逆向開始
animation-fill-mode -------------------------------規定動畫時間之外的狀態
animation-play-state ------------------------------規定動畫的運行和暫停

animation-timing-function

規定動畫的速度曲線。預設是 "ease"。常用的運動速度曲線還有以下幾種：

linear：線性過渡。
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。

也可以直接使用貝茲路徑規定啟動並執行速度曲線，貝茲路徑的4個數值需在[0, 1]區間內。

animation-direction

規定動畫是否在下一周期逆向播放。預設是 "normal"。

reverse:反方向運動
alternate:先正常方向再反方向運動，持續交替
alternate-reverse:先反方向再正常方向運動，持續交替

animation-fill-mode

規定對象動畫時間之外的狀態。常用值如下：

none:預設值
forwards:設定對象狀態為動畫結束時的狀態
backwards:設定對象狀態為動畫開始時的狀態

圓形運動軌跡

實現代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>沿圓形軌跡運動</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        html,body{            height: 100%;        }        #trajectory {            width: 300px;            height: 300px;            border: 4px solid #949494;            border-radius: 50%;            position: relative;            left: calc(50% - 153px);            top:calc(50% - 153px);        }        @keyframes moveX{            0% {left: -22px;}            100% {left: 282px;}        }        @keyframes moveY{            0% {top: -22px;}            100% {top: 282px;}        }        #move {            width: 40px;            height: 40px;            font-size: 12px;            background-color: #32c33a;            border-radius: 50%;            position: absolute;            left:-22px;            top:-22px;            animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;        }    </style></head><body>    <div id="trajectory">        <div id="move">Immortal brother</div>    </div></body></html>

以上代碼的注意點如下：

對body高度100%的設定原因在於html5環境下body的預設高度為0
calc在使用過程中，值與值之間的“-”和“+”兩端的空格必不可少
動畫當中的left和top值為物體運動的起始位置和結束位置，要注意border值
動畫一次執行的運動軌跡僅為一半
速度曲線：cubic-bezier(0.36,0,0.64,1)；
兩個方向的延遲時間的設定 X：-2s;Y : 0s
先正方向再反方向持續交替運行：alternate

本文章原先以中文撰寫並發佈於 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