CSS3 逐行向上是一種 CSS3 動畫效果，可以讓文本或者圖片逐行展示，增加頁面的動態感。下面我們來學習一下如何實現 CSS3 逐行向上的效果。

/* 設置需要展示的元素 */
.example {
display: inline-block;
overflow: hidden;
}
/* 設置動畫效果 */
.example p {
opacity:0;
animation: reveal 3s ease forwards;
}
/* 定義動畫關鍵幀 */
@keyframes reveal {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

在上面的代碼中，我們首先設置了需要展示的元素為“example”，并將其顯示方式設置為inline-block，這樣可以讓它們在同一行展示。

接著，我們設置動畫效果，使用opacity屬性控制元素的透明度，animation屬性定義動畫名（“reveal”）、動畫時間（3秒）、緩動方式（ease）和動畫結束后的狀態（forwards）。

最后，我們定義了動畫的關鍵幀。在第0%的狀態下，元素的透明度為0，位置在底部（translateY(100%)），表示默認不可見。在100%的狀態下，元素的透明度為1，位置為0（translateY(0)），表示顯示在頁面上。

通過這種方式，我們可以輕松地實現 CSS3 逐行向上的效果，為頁面增添生動感和視覺效果。