css内容渐入效果实现

Posted 2022-09-20 pjl43

 

.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效果：

如果你有经常访问苹果官网，你会发现其中就有类似的特效：

在展示内容的官网页面，可以结合此特效会带来比较优雅的展示提示