CSS3自制動畫可以通過CSS3中的一些新的屬性和動畫函數(shù)來實現(xiàn)。下面我們來介紹一些簡單的CSS3自制動畫。

/* 創(chuàng)建一個簡單的CSS3自制動畫 */
#box {
width: 100px;
height: 100px;
background-color: #f00;
position: relative;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}

上面的代碼可以創(chuàng)建一個簡單的CSS3自制動畫。在這個動畫中，一個紅色的100x100的div會不停地來回移動，類似于一個彈跳的球。

下面我們來解釋一下上面代碼中的各個部分:

• #box是一個在HTML文檔中已經(jīng)存在的div元素的ID選擇器。
• animation-name: example;指定使用一個名為example的CSS動畫。
• animation-duration: 2s;指定動畫周期為2秒。
• animation-iteration-count: infinite;指定動畫無限循環(huán)。
• @keyframes example指定使用一個名為example的CSS動畫定義。
• 0% {left: 0px;}指定當動畫的進度為0%時，div的left屬性值為0px。
• 50% {left: 200px;}指定當動畫的進度為50%時，div的left屬性值為200px。
• 100% {left: 0px;}指定當動畫的進度為100%時，div的left屬性值為0px。

使用CSS3自制動畫時需要注意的一點是，在老版本的瀏覽器中可能不支持CSS3動畫，需要進行兼容性處理。

以上就是CSS3自制動畫的介紹，希望對你有所幫助。