CSS動畫是在網站設計中常用的效果之一，它可以為網站增添生動、活潑的氛圍。 當我們使用CSS動畫時，經常會用到曲線來進行動畫效果的定位和描繪。 在此，我們將介紹如何使用CSS實現曲線動畫效果。

/* 創建曲線 */
.curve {
width: 400px;
height: 100px;
background: #c4c4c4;
position: relative;
}
/* 創建動畫 */
.curve::before {
content: '';
display: block;
background: #ff3f3f;
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 0;
animation: mymove 5s infinite;
}
/* 編寫關鍵幀 */
@keyframes mymove {
0% {
left: 0;
top: 0;
}
25% {
left: 90%;
top: 0;
}
50% {
left: 90%;
top: 70%;
}
75% {
left: 0;
top: 70%;
}
100% {
left: 0;
top: 0;
}
}

以上是一個簡單的例子， 包括了創建曲線和動畫，同時還有關鍵幀。 我們可以看到，在.curve::before選擇器中，我們為動畫定義了五個關鍵幀，每個關鍵幀都有相應的left和top比例值，因此，通過這些比例值，我們可以創建一個曲線形狀。 為了獲得這些比例值，我們可以使用“cubic-bezier”函數來規定動畫所需的警示函數。

.curve::before {
content: '';
display: block;
background: #ff3f3f;
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
top: 0;
animation: mymove 5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

我們可以看到，我們在定義動畫的同時，還指定了“cubic-bezier”函數，函數中包含四個表示x、y值的數字參數。這四個數字參數分別是P0、P1、P2和P3，其中P0和P3的值默認為0和1，代表起始和終止點；而P1和P2的值則是我們自己定義的，用于指定曲線中的關鍵點。

通過這種方式，我們可以實現各種形狀的曲線動畫效果， 從簡單的直線到復雜的S型曲線，只要我們靈活運用CSS動畫和“cubic-bezier”函數，就能定制出想要的動畫效果。