关于如何使用CSS3的Animations实现平滑的页面加载详细讲解

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

 

我对在Apple.com产品页面上看到的微妙动画印象深刻。通常从加载页面时播放的动画开始。该动画通过滑动/淡入将元素引入页面。它很微妙,但对用户很满意。

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

在页面加载时播放动画的问题在于许多资源(包括操纵DOM的图像和脚本)导致浏览器重新绘制/重新布局。这在尝试播放动画时与浏览器资源竞争,导致丢帧。

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

通常在页面上引入/显示元素时,元素将被隐藏(不透明度: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
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片