近年來，隨著網頁動畫的興起，越來越多的網站開始采用CSS3的動畫效果。而JavaScript則負責掌控頁面的交互和響應操作。那么，如何結合使用這兩種技術，實現一個響應用戶點擊事件的CSS3動畫效果呢？

// HTML代碼點擊我// CSS3動畫效果
@keyframes scale {
0% {transform: scale(1);}
50% {transform: scale(1.5);}
100% {transform: scale(1);}
}
button {
animation: scale 1s ease-in-out;
}
// JavaScript代碼
document.getElementById("btn").addEventListener("click", function() {
// 點擊事件觸發CSS3動畫效果
this.classList.add("active");
setTimeout(() =>{
this.classList.remove("active");
}, 1000);
});

首先，我們需要在HTML中添加一個按鈕，用于觸發點擊事件。然后，通過CSS3的@keyframes規則創建一個scale動畫，實現按鈕的縮放效果。

接著，通過JavaScript的addEventListener方法監聽按鈕的點擊事件，當用戶點擊按鈕時，給按鈕添加一個名為active的類名，以觸發動畫效果。為了讓動畫效果能夠重復觸發，需要在1000ms后將active類名移除，以便下一次點擊還能繼續生效。

結合使用JavaScript和CSS3，我們可以很容易地實現一個響應用戶點擊事件的CSS3動畫效果，優化網頁交互體驗，增加頁面的互動性和趣味性。