在現代的網頁設計中，導航欄是一個非常重要的元素，能夠為用戶提供快速切換網站功能。而在CSS中，使用動畫效果來打造彈出式的導航欄，能夠增強用戶體驗，讓網站更加生動有趣。

.nav {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
}
.nav-toggle {
position: absolute;
top: 0;
right: 0;
z-index: 2;
padding: 1rem;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
display: block;
background-color: #333;
height: 3px;
width: 2.5rem;
border-radius: 3px;
position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
content: '';
position: absolute;
}
.nav-toggle span::before {
top: -9px;
}
.nav-toggle span::after {
top: 9px;
}
.nav-nav {
position: absolute;
top: 100%;
right: 0;
background-color: #333;
list-style: none;
margin: 0;
padding: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 250ms ease-in-out;
transform: translateY(-10px);
border-radius: 0 0 5px 5px;
}
.nav:hover .nav-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-nav li {
margin: 5px 0;
text-align: center;
}
.nav-nav a {
text-decoration: none;
color: #fff;
font-size: 1.2rem;
display: block;
padding: 0.5rem 1rem;
}

以上代碼實現了一個彈出式的導航欄，當鼠標懸浮在導航欄上時，導航菜單會由上而下的彈出動畫。其中，使用了CSS3過渡屬性和transform屬性來控制導航菜單的動畫效果。