如何使用CSS3的Animations实现平滑的页面加载

本篇文章给大家分享的内容是关于如何使用 css3的animations实现平滑的页面加载，有需要的朋友可以参考一下。

我对Apple.com产品页面上看到的一些微妙动画印象深刻。它通常以在页面加载时播放的动画开始，其中通过滑动/淡入在页面上引入元素。它是如此微妙，但对用户来说是如此令人满意。

最近，我发现了一些问题，即添加简单的动画效果而不会出现波动，从而破坏了体验。

在页面加载时播放动画的问题在于许多资源（包括操纵DOM的图像和脚本）导致浏览器重新绘制/重新布局。这在尝试播放动画时与浏览器资源竞争，导致丢帧。（推荐教程：css3视频教程）

一种解决方法是延迟动画的开始以允许在播放动画之前绘制页面。

立即学习“前端免费学习笔记（深入）”；

通常在页面上引入/显示元素时，元素将被隐藏（不透明度：0），并且随着时间的推移会获得完全不透明度。

虽然动画属性有’delay’参数，但为此参数指定时间将在其最终帧中显示指定延迟长度的元素。然后它将隐藏元素，并将动画设置为完全不透明度。这是一种不希望的效果。我们不希望在延迟期间看到最后一个关键帧。

要避免在延迟期间看到该元素，请按照下列步骤操作：

1）在我们想要动画的html中创建一个div 
2）在我们的css文件中创建关键帧（这些基本上将定义事物的变化，在这种情况下从不透明度0到不透明度100）

@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实现平滑的页面加载的详细内容，更多请关注【创想鸟】其它相关文章！