CSS動畫一直是Web設計中必不可少的一部分。本篇文章將介紹一種常用的CSS動畫效果——側邊滑入。

首先，我們需要創建一個HTML元素作為觸發器，比如一個按鈕。我們假設按鈕的id為"menu-button"。

<button id="menu-button">菜單</button>

接下來，我們需要為側邊菜單創建一個代碼塊。首先，讓該代碼塊絕對定位，并設置left為-100%。這樣，菜單將會隱藏在屏幕左側。

<div id="side-menu">
<!-- 菜單選項 -->
</div>
#side-menu {
position: absolute;
left: -100%;
}

現在，我們可以為觸發器添加一個點擊事件，以便在按鈕被點擊時滑出菜單。我們使用CSS的transition屬性來實現平滑的移動效果。

document.getElementById("menu-button").addEventListener("click", function(){
document.getElementById("side-menu").style.left = "0";
});
#side-menu {
position: absolute;
left: -100%;
transition: left 0.5s;
}

在上述代碼中，我們定義了一個點擊事件，當點擊按鈕時，通過JavaScript改變side-menu的left屬性值，使該元素在0.5秒內從屏幕左側滑入。

我們也可以為菜單添加一個關閉按鈕。同樣，我們添加一個點擊事件，當點擊關閉按鈕時，菜單將會從右側滑回左側屏幕。

<button id="close-menu-button">關閉</button>
document.getElementById("close-menu-button").addEventListener("click", function(){
document.getElementById("side-menu").style.left = "-100%";
});
#close-menu-button {
position: absolute;
top: 10px;
right: 10px;
}
#side-menu {
position: absolute;
left: -100%;
transition: left 0.5s;
}

在上述代碼中，我們為關閉按鈕添加了一個點擊事件，使得點擊關閉按鈕后側邊菜單向左滑回屏幕左側。

綜上，我們介紹了如何使用CSS動畫創建一個側邊菜單的滑入效果。通過JavaScript和CSS的transition屬性，我們可以實現平滑的移動效果和交互體驗。