animation: name duration timing-function delay iteration-count direction fill-mode play-state;
(關鍵幀名稱,持續時間,速度曲線,延遲時間,動畫次數,是否反向,完成狀態,運行|暫停)
- animation-name 關鍵幀名稱
@keyframes name { }
(1)關鍵幀的聲明只有兩種：(from/to)和(%)
(2)0 (%)從0%開始至100%，0%～100%中間任意數字都可以 - animation-duration 動畫持續時間（默認爲0，值可以設置成秒[s]或毫秒[ms]）
- animation-timing-function 動畫速度曲線（默認值ease）
![]()
- animation-delay 動畫播放延遲時間設置（s/ms）
- animation-iteration-count 動畫播放次數,默認值1，值：n/infinite）
- animation-direction 規定是否應該輪流反向播放動畫。
animation-direction: normal|alternate;
normal:默認值。動畫應該正常播放。
alternate:動畫應該輪流反向播放。動畫會在奇數次數（1、3、5 等等）正常播放，而在偶數次數（2、4、6 等等）向後播放。 - animation-fill-mode: backwards/forwards; 動畫播放完之後的狀態（默認值none，值:none;backwards;forwards;both.）
(1)backwards應用在第一個關鍵幀的狀態,即定格在0%時候的樣子
(2) forwards動畫完成保持最後一幀的狀態,即定格在最後100%的樣子
animation-play-state:running|paused; //運行|暫停（默認運行）
注意：始終規定 animation-duration 屬性，否則時長爲 0，就不會播放動畫了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>貝塞爾曲線動畫調研</title>
<style>
html {
background: #ad4e24;
}
/* //定義球的初始值，位置是絕對定位； */
.ball {
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
bottom: 40px;
z-index: 10;
left: 40px;
background: greenyellow;
}
/* //定義動畫的流程 */
.run_top_right {
display: block;
animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66, .1, 1, .41);
/* animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 ease-out; */
animation-fill-mode: forwards;
}
/* //向上走的動畫初始及結尾值 */
@keyframes run-right-top {
0% {
bottom: 40px;
}
100% {
bottom: 500px;
}
}
/* //向上右的動畫初始及結尾值 */
@keyframes run-right-right {
0% {
left: 40px;
}
100% {
left: 600px;
}
}
</style>
</head>
<body>
<div class="ball run_top_right"></div>
</body>
</html>
第一、分解運動
上圖的曲線運動進行分解
向右：勻速運動；
向上：加速運動；（因爲向上的線越來越陡，意味着速度越來越快，所以在做加速運動）
第二、實現代碼解釋
——@keyframes 是css3的一個規則，用來定義一個運動的每個楨的位置，大小顏色等；
——這段代碼的意思是動畫animation用run-right-right動畫和 run-right-top動畫，注意我們是同時引用的兩個動畫；
就是@keyframes 所定義的，然後我們又設置了一些參數，逐一解釋：
一.第一個參數就是引用的動畫名字；
二，動畫持續時間3s；
三、0.4s是延遲時間爲0.4s，以run_top_right加到ball上面的時間爲準，延後0.4s;
四、1是動畫的執行次數是1次；
五、cubic-bezier(.66,.1,1,.41) 就是重要的貝塞爾曲線(cubic-bezier)；
實際上是設置animation-timing-function的屬性；就是設置運動速度的特性屬性；
1.linear，就是線性運動，也就是勻速運動；
2 ease，默認。動畫以低速開始，然後加快，在結束前變慢。
3.ease-in，ease-out,ease-in-out,就很好記，ease就是慢的意思，ease-in就是慢速開始，就是做加速運動，ease-out就是減速運動，ease-in-out就是先加速後減速；當然我們也可以設置成cubic-bezier()值；
因爲這裏我只需要向上的運動做變速運動所以run-right-right 我設置的是linear，勻速運動，然後 run-right-top設置的是cubic-bezier(.66,.1,1,.41)，這樣的加速運動，這樣得到的運動路徑就是一條曲線！！曲線的軌跡又run-right-top的cubic-bezier值決定！
animation-fill-mode: forwards;
animation-fill-mode設置動畫完成後的狀態；
forwards：當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。簡單說就是定格在最後100%的樣子；
backwards：在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。就是定格在0%時候的樣子
css3圓形軌跡動畫
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> css3圓形軌跡動畫 </title>
<style type="text/css">
@keyframes animX{
0% {left: 0px;}
100% {left: 500px;}
}
@keyframes animY{
0% {top: 0px;}
100% {top: 500px;}
}
#ball {
width: 20px;
height: 20px;
background-color: #f66;
border-radius: 50%;
position: absolute;
animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
}
#lopp {
width: 500px;
height: 500px;
border: 2px solid #999;
border-radius: 50%;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="lopp"></div>
<div id="ball"></div>
</body>
</html>
