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>
    <p id="trajectory">
        <p id="move">Immortal brother</p>
    </p></body></html>

登入後複製

以上程式碼的注意點如下：