CSS3柱形圖動畫是前端開發中常見的動畫效果之一。通過CSS3中的樣式屬性和動畫屬性，可以輕松地呈現出驚艷的柱形圖效果，提高頁面的視覺效果和用戶體驗。

下面我們來看一段實現CSS3柱形圖動畫的代碼：

<style>.chart {
display: flex;
justify-content: space-between;
height: 150px;
width: 100%;
background-color: #F2F2F2;
padding: 15px;
}
.bar {
width: 20%;
background-color: #41B883;
border-radius: 10px;
transition: height 0.5s ease-in-out;
}
.bar:hover {
height: 90%;
}
.label {
text-align: center;
}
.label span {
font-size: 24px;
font-weight: bold;
}
</style><div class="chart"><div class="bar" style="height:85%"><div class="label"><span>85%</span></div></div><div class="bar" style="height:60%"><div class="label"><span>60%</span></div></div><div class="bar" style="height:75%"><div class="label"><span>75%</span></div></div><div class="bar" style="height:45%"><div class="label"><span>45%</span></div></div></div>

代碼中，首先定義了一個class為“chart”的div，用于放置四個柱形條。每個柱形條都有一個class為“bar”，定義了柱形條的樣式、高度以及過渡效果。其中，使用了CSS3的transition屬性，使得柱形條高度在鼠標懸停的時候能夠漸變過渡。同時，還定義了柱形條的鼠標懸停樣式，即高度增加。

在柱形條內部，又定義了一個class為“label”的div，用于顯示當前柱形條的百分比。通過設置“label”樣式的text-align屬性，使百分比居中顯示。同時，為了讓百分比看起來更加醒目，使用了span標簽并設置了字體大小和加粗樣式。

總的來說，CSS3柱形圖動畫通過簡單的CSS樣式和過渡效果，就可以實現精美的柱形圖效果，能夠極大地提高網站的視覺體驗。