How to use Animations of CSS3 to achieve smooth page loading
This article will explain in detail how to use CSS3's Animations to achieve smooth page loading, the editor thinks it is very practical, so share it for you to do a reference, I hope you can get something after reading this article.
I was impressed by some of the subtle animations I saw on the Apple.com product page. It usually starts with an animation that plays when the page loads, where elements are introduced on the page by sliding / fading. It's so subtle, but it's so satisfying for users.
Recently, I found some problems, that is, adding simple animation effects without fluctuations, thus ruining the experience.
The problem with playing animations when the page loads is that many resources, including images and scripts that manipulate DOM, cause browsers to redraw / relayout. This competes with browser resources when trying to play the animation, resulting in frame loss.
One solution is to delay the start of the animation to allow the page to be drawn before the animation is played.
Usually when an element is introduced / displayed on a page, the element is hidden (opacity: 0) and is completely opaque over time.
Although the animation property has a 'delay' parameter, the specified time for this parameter displays the element with the specified delay length in its final frame. It then hides the element and animates it to be completely opaque. This is an unwanted effect. We do not want to see the last Keyframe during the delay.
To avoid seeing this element during the delay, follow these steps:
1) create a div in the html we want to animate
2) create keyframes in our css file (these basically define changes in things, in this case from 0 to 100 opacity)
@ keyframesfadeIn {from {opacity:0;} to {opacity:1;}}
3) create div tags in our css, define our animation (duration, start delay, etc.) and link it to our keyframes
. fade-in {
Opacity:0;/*makethingsinvisibleuponstart*/
Animation:fadeInease-in1;/*callourkeyframenamedfadeIn,useanimattionease-inandrepeatitonly1time*/
Animation-fill-mode:forwards;/*thismakessurethatafteranimationisdoneweremainatthelastkeyframevalue (opacity:1) * /
Animation-duration:1s
Animation-delay:1.5s}
The key is to use:
Animation-fill-mode:forwards
And
Opacity:0
In combination, this hides the elements we want to animate the specified delay (opacity: 0) and forces the animation to stop at the last Keyframe (opacity: 1).
On "how to use CSS3's Animations to achieve smooth page loading" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.
