動效菜單是一個常見的網頁菜單效果，可以讓網站更加生動有趣。為了實現動態效果，我們可以使用CSS動畫來完成。下面就讓我們來看一下如何使用CSS動畫來實現動效菜單吧！

.menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.menu li {
list-style: none;
margin-bottom: 20px;
opacity: 0;
transform: translateY(20px);
transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}
.menu li:nth-child(1) {
transition-delay: 0ms;
}
.menu li:nth-child(2) {
transition-delay: 100ms;
}
.menu li:nth-child(3) {
transition-delay: 200ms;
}
.menu li:nth-child(4) {
transition-delay: 300ms;
}
.menu li:nth-child(5) {
transition-delay: 400ms;
}
.menu li:nth-child(6) {
transition-delay: 500ms;
}
.menu li:hover {
opacity: 1;
transform: translateY(0);
}

CSS動畫是通過關鍵幀來指定一個元素在動畫過程中的各種狀態的，實現一個動效菜單也不復雜。在上述代碼中，我們設置了一個菜單容器menu，通過flex布局將菜單垂直居中。每一個菜單項用li標簽表示，并設置了一些初始狀態，如opacity為0、transform為translateY(20px)，這樣就可以讓菜單項在一開始的時候不可見，設置transition屬性可以讓菜單項在動畫過程中平滑過渡，給了500ms的時間，緩慢改變透明度和位置，通過nth-child判斷菜單項在不同時間的動畫延遲，好讓每一個菜單項依次出現。

當鼠標懸停在一個菜單項上時，我們改變了菜單項的opacity和transform屬性，讓菜單項變得可見，并移回原來的位置。

通過CSS動畫，我們可以讓網頁菜單更加生動有趣，同時讓用戶有更好的操作體驗。動效菜單是一個很好的案例，讓我們更好地理解和掌握CSS動畫。