How to use CSS3 Animations to achieve smooth page loading

This article shares with you how to use CSS3 Animations to achieve smooth page loading. Friends in need can refer to it.

I was impressed by some of the subtle animations I saw on Apple.com product pages. It usually starts with an animation that plays when the page loads, where an element is introduced on the page by sliding/fade-in. It's so subtle, yet so satisfying for the user.

Recently, I've discovered some issues with adding simple animation effects without ripples, ruining the experience.

The problem with playing animations on page load is that many resources (including images and scripts that manipulate the DOM) cause the browser to redraw/relayout. This competes with browser resources when trying to play the animation, causing dropped frames. (Recommended tutorial: css3 video tutorial)

One workaround is to delay the start of the animation to allow the page to be drawn before the animation plays.

Normally when an element is introduced/shown on the page, the element will be hidden (opacity: 0) and will gain full opacity over time.

Although the animation property has a 'delay' parameter, specifying a time for this parameter will display the element with the specified delay length in its final frame. It will then hide the element and animate it to full opacity. This is an undesirable effect. We don't want to see the last keyframe during the delay.

To avoid seeing the element during the delay, follow these steps:

1) Create a div in the html we want to animate
2) In our css Create keyframes in the file (these will basically define how things change, in this case opacity 0 to opacity 100)

@keyframes fadeIn { 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 keyframe

.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}

The key is to use:

animation-fill-mode:forwards

and

opacity: 0

combined, this will hide the element we want to animate for the specified delay (opacity: 0) and force the animation to stop on the last keyframe (opacity: 1).

The above is the detailed content of How to use CSS3 Animations to achieve smooth page loading. For more information, please follow other related articles on the PHP Chinese website!