CSS柱狀圖動畫近年來越來越受到前端開發者的歡迎。通過CSS的Transform和Transition屬性，可以輕松地在網頁中實現柱狀圖的動畫效果。

/*HTML結構*/
<div class="chart">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
</div>
/*CSS樣式*/
.chart{
width: 300px;
height: 200px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.chart div{
width: 30px;
height: 0px;
background-color: #FFB6C1;
transition: 1s;
}
.bar-1{
height: 100px;
}
.bar-2{
height: 150px;
}
.bar-3{
height: 70px;
}
/*鼠標懸浮時的動畫效果*/
.chart div:hover{
transform: scale(1.1);
background-color: #FF69B4;
}

以上是一個簡單的CSS柱狀圖動畫的實現。通過設置柱狀圖的高度，以及用伸縮盒子模型讓這些柱子垂直排列，我們就得到了一個基本結構。在CSS中，我們通過Transition屬性設置柱子高度變化需要的時間，然后通過給不同的柱子設置不同高度，就可以得到不同高度的柱子了。

另外，我們可以通過添加:hover偽類，讓柱子在鼠標懸浮時實現動畫效果。例如，我們可以將背景色變為粉色，并將柱子放大一些。

總的來說，CSS柱狀圖動畫是一種簡單而實用的前端技術。通過掌握相關的CSS屬性和伸縮盒子模型的使用，我們可以輕松實現網頁中的動態數據可視化。