CSS3動畫是一種能夠通過添加CSS屬性和動畫效果來創(chuàng)建交互式動畫的技術(shù)。在這個項目中，我們將創(chuàng)建一個簡單的CSS3動畫，該動畫將創(chuàng)建一個反復(fù)飄蕩的效果。

讓我們開始創(chuàng)建這個動畫。首先，我們需要在HTML中添加一個元素，該元素將顯示我們的動畫效果。我們可以使用CSS的`position: relative`屬性將元素設(shè)置為相對定位，然后使用CSS的`animation`屬性來創(chuàng)建動畫效果。

```html

<div class="animation-container">

<div class="animation-element"></div>

</div>

在這個代碼中，我們使用了CSS的`animation`屬性來創(chuàng)建動畫效果。`animation-name`屬性指定了我們要創(chuàng)建的動畫的名稱，`animation-duration`屬性指定了動畫的持續(xù)時間，`animation-iteration-count`屬性指定了動畫的迭代次數(shù)，`animation-direction`屬性指定了動畫的方向。

```css

.animation-container {

position: relative;

.animation-element {

position: absolute;

width: 100px;

height: 100px;

background-color: blue;

.animation-element {

animation：飄蕩 5s infinite;

@keyframes飄蕩 {

0% {

transform: translate(0, 0);

100% {

transform: translate(0, 100px);

在這個代碼中，我們使用了CSS的`animation`屬性來創(chuàng)建動畫效果。`animation-name`屬性指定了我們要創(chuàng)建的動畫的名稱，`animation-duration`屬性指定了動畫的持續(xù)時間，`animation-iteration-count`屬性指定了動畫的迭代次數(shù)，`animation-direction`屬性指定了動畫的方向。我們使用了`0%`到`100%`來定義動畫的起始和結(jié)束狀態(tài)，其中`transform`屬性用于設(shè)置動畫效果。

現(xiàn)在，我們已經(jīng)創(chuàng)建了一個簡單的CSS3動畫，它將創(chuàng)建一個反復(fù)飄蕩的效果。我們可以使用瀏覽器的開發(fā)者工具來查看動畫效果。當我們滾動頁面時，我們將看到動畫效果在不斷地飄蕩。

這只是一個簡單的CSS3動畫示例，我們還可以使用更復(fù)雜的CSS3動畫效果來創(chuàng)建各種不同的交互式動畫效果。通過使用CSS3動畫技術(shù)，我們可以創(chuàng)建出具有高度可定制性和靈活性的交互式動畫效果。