按鈕觸發CSS動畫在網頁設計中非常常見，讓網頁變得更加生動有趣。下面就是一個簡單實現按鈕觸發CSS動畫的方法，詳見代碼注釋：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定義動畫 */
@keyframes myAnimation {
0% {transform: translateY(0px);}
100% {transform: translateY(50px);}
}
/* 按鈕樣式 */
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 激活動畫的類 */
.animation {
animation: myAnimation 1s forwards;
}
/* 初始狀態的樣式 */
.box {
width: 100px;
height: 100px;
background-color: #f44336;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="document.querySelector('.box').classList.add('animation')">點我觸發動畫</button>
</body>
</html>在CSS樣式中，我們定義了一個動畫，即從上向下移動50像素的myAnimation動畫。然后定義了一個按鈕的樣式和初始狀態下的方形塊的樣式。最后添加了一個帶有animation類的定義，它將使方形塊執行動畫效果。我們在JavaScript中添加了一個單擊事件，每次單擊按鈕時都會向方形塊添加animation類，觸發動畫效果。