近年來，CSS3技術的應用越來越廣泛，其中一種非常熱門的效果就是“滑動到以后CSS3才動”。這種效果非常酷炫，可以很好地提升網站的用戶體驗。那么，如何實現這種效果呢？

.scroll-animate {
opacity: 0;
transform: translateY(60px);
transition: transform 1s ease-out, opacity 1s ease-out;
}
.scroll-animate.scroll-show {
opacity: 1;
transform: translateY(0);
}

以上代碼是實現“滑動到以后CSS3才動”效果的核心代碼。這段代碼將目標元素的透明度設為0，將它向下平移60px，并為它添加了過渡效果。然后，當目標元素被添加scroll-show類時，它的透明度設為1，平移效果被取消，從而通過CSS3技術實現了動畫效果。

那么，如何將這段代碼應用到網站中呢？首先，我們需要在HTML頁面中添加一個scroll-animate類，如下：

要實現動畫的元素

然后，在JavaScript代碼中通過監聽窗口的滾動事件，判斷元素是否已經滑動到可視區域內，如果是，則添加scroll-show類，觸發元素的動畫效果，如下：

$(window).scroll(function() {
var windowTop = $(window).scrollTop();
var windowHeight = $(window).height();
$(".scroll-animate").each(function() {
var elementTop = $(this).offset().top;
if (elementTop - windowHeight<= windowTop) {
$(this).addClass("scroll-show");
}
});
});

以上代碼使用了jQuery庫，每當窗口滾動時，就遍歷所有擁有scroll-animate類的元素，如果元素已經滑動到了窗口的可視區域內，則添加scroll-show類，觸發元素的動畫效果。

總之，“滑動到以后CSS3才動”效果是一種非常流行的頁面動畫效果，通過合理地利用HTML、CSS和JavaScript技術，我們可以為網站帶來更好的用戶體驗，同時也提升網站的視覺效果。