.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效果：
如果你有经常访问苹果官网，你会发现其中就有类似的特效：在展示内容的官网页面，可以结合此特效会带来比较优雅的展示提示
转载于:https://www.cnblogs.com/pjl43/p/11444099.html
相关资源：HTML5 js DIV文字淡入淡出(fadein fadeout)效果.rar