css內容漸入效果實現

 

.fade-in-section {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 1200ms ease-out, transform 600ms ease-out,
  visibility 1200ms ease-out;
  will-change: opacity, transform, visibility; // 動畫性能優化，頁面不是特別復雜情況下不要使用，詳見：這里
　　
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

 

demo效果：

如果你有經常訪問蘋果官網，你會發現其中就有類似的特效：

在展示內容的官網頁面，可以結合此特效會帶來比較優雅的展示提示