比如這個網站：https://www.queenshop.com.tw/EN
滑鼠只要移動到導覽列，下拉選單立刻出現。但是我家網站下拉選單比較大。然後每次滑鼠一滑到，立刻就會佔了螢幕很大一片。我老闆想要延遲出現選單，比如 0.5秒，或是1秒。不要立刻。
有上網查了一下，也有試做，但是都不成功。
<style>
.dropdown:hover{
animation: fade 1s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
這段是說，滑鼠一移到導覽列，馬上啟動這個效果。下拉選單從0完全透明，到1完全呈現，花1秒的時間渲染完成。但是我們想要的是，滑鼠停在導覽列上面，1秒之後才出現下拉選單。不需要處理弄淡入淡出。
有嘗試這樣2
animation: fade 2s;
transition-delay: 2s;
為了讓效果明顯，transition-delay 設2秒，但是沒效果。
已邀請的邦友 {{ invite_list.length }}/5
試試animation-delay
線上範例
上面海綿大大已經將animation裡面的屬性寫出來了，就是延遲幾秒，但是上面動畫也是要用animation
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay
MDN 上面有說明喔
transtion是整體，下面就要用transtion-delay屬性，不是animation-delay喔~~
transtion: fade 2s;
transition-delay: 2s;
iThome鐵人賽
看影片追技術