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>
<p id="trajectory">
<p id="move">Immortal brother</p>
</p></body></html>以上程式碼的注意點如下：
對body高度100%的設定原因在於html5環境下body的預設高度為0
- ##calc在使用過程中，值與值之間的「-」和「+」兩端的空格必不可少
- #動畫當中的left和top值為物體運動的起始位置和結束位置，要注意border值
- 動畫一次執行的運動軌跡僅為一半
- 的速度曲線：cubic-bezier(0.36,0 ,0.64,1);
- 兩個方向的延遲時間的設定X：-2s;Y : 0s
- 先正方向再反方向持續交替運行：alternate
以上是css3動畫中圓形運動軌跡的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Google PagesPeed的工作原理：提高分數和搜索引擎排名Apr 18, 2025 am 10:03 AM在本文中，我們發現PagesPeed如何計算其關鍵速度分數。速度已成為提高收入和降低遺棄率的關鍵因素的關鍵因素，這已經不是什麼秘密了。現在，Google使用頁面速度作為排名因素，許多ORGA
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3漢化版
中文版，非常好用
SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
