如何使用CSS3的Animations完成平滑的页面加载

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3）在我们的css中创建div标签，定义我们的动画（持续时间，开始延迟等）并将其链接到我们的关键帧

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s}
关键是使用：
animation-fill-mode:forwards
和
opacity: 0
结合，这会隐藏我们想要为指定延迟设置动画的元素（不透明度：0），并强制动画在最后一个关键帧上停止（不透明度：1）。
以上就是如何使用CSS3的Animations实现平滑的页面加载的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：如何运用CSS3的Animations完成平滑的页面加载