CSS抽屜動畫是目前網頁動效應用比較廣泛的一種效果之一，它通過CSS屬性的控制實現了頁面元素的展開、收起等動態效果，給頁面增添了活力和魅力。

抽屜動畫的原理是通過CSS中的過渡效果transition以及布局的調整來實現的，我們可以簡單地通過以下步驟來實現一個抽屜動畫：

//定義HTML結構
<div class="drawer-box">
<div class="drawer-header">抽屜頭部</div>
<div class="drawer-body">抽屜內容</div>
</div>
//定義CSS樣式
.drawer-box{
width: 200px;
transition: all 0.5s ease-in-out;
overflow:hidden;
}
.drawer-header{
height: 50px;
background-color: #ccc;
}
.drawer-body{
height: 0;
padding: 0 20px;
background-color: #fff;
}
.drawer-box.active .drawer-body{
height: auto;
}

通過CSS樣式中的transition屬性，實現了抽屜在展開和收起時的平滑過渡效果。此時，當div元素的.active類被添加到.drawer-box中時，.drawer-body的高度被設置為自適應高度，從而實現抽屜的展開動畫。

總的來說，抽屜動畫原理并不復雜，只需要靈活使用CSS過渡效果和布局調整，就可以輕松實現一個好看的抽屜效果。在實際應用中，還可以通過JavaScript的DOM操作來控制抽屜的開啟和關閉，以增加頁面的交互性和動態性。