CSS3動畫是一種強大的前端技術，它可以讓網站更加生動和富有吸引力。當CSS3動畫執行完成時，頁面上的元素會以一個特定的速度動態地改變它們的樣式或位置。在這篇文章中，我們將了解如何使用CSS3動畫在網頁上創建交互性元素，并在動畫執行完畢時執行一些操作。

// css3動畫樣式
.example{
animation-name: myAnimation;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
// 動畫完成之后執行的js代碼
$(document).ready(function(){
$('.example').on('animationend', function(){
alert('動畫執行完畢');
// 你的操作代碼
});
});

以上是CSS3動畫樣式和動畫完成之后執行的JavaScript代碼。在CSS3動畫中，我們可以定義動畫名稱、時長、以及它的間隔方式、延遲、重復次數和方向等。當動畫執行完成時，我們可以使用JavaScript的animationend事件來檢測動畫是否已經結束。

在JavaScript代碼中，$(document).ready()用于在文檔加載完畢后執行腳本，$('.example')選擇需要添加動畫的元素。然后，我們使用on()方法來監聽animationend事件。當動畫執行完成時，alert()方法會彈出一個提醒框，// 你的操作代碼代表你可以在這里添加你想要執行的任何JavaScript操作。

總的來說，當CSS3動畫執行完畢時，我們可以使用JavaScript來檢測它是否已經結束，并可以在此時執行一些操作，使網頁更加生動和富有交互性。