On the second day of work, I will send you the third installment of a weekly animation series, and give myself a big praise for the New Year. Without further ado, let’s begin our text.

This article analyzes some of the effects of implementation, just as an idea to share, just as learning material to use.

Source animation

You can see that when the mouse clicks on the heart, there are some particle effects, and the heart is filled with red, the effect is really great.

Implementation analysis

We should remember from one of the Front-end animations of the Week: Implementation of the UC Browser Team showing animations that we mentioned the timing-function animation-timing-function, whose property has a step function (), which we can use. Using a Sprite that contains a set of gradients (as shown below), set the appropriate number of steps, as long as we jump the moving image on the horizontal axis, we can achieve our effect.

Code implementation

Use one of the special sprites mentioned above as the background

.HeartAnimation {
    background-image: url(web_heart_animation_edge.png);
    background-position: left;
}
Copy the code

Steps is a step function. The function curve is not continuous, because there are 29 images with 28 intervals, so we set the number of steps to 28

.like-active {
    animation-timing-function: steps(28);
    animation-name: heart-burst;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    display: inline-block
}
@keyframes heart-burst {
    0% {
        background-position: left
    }

    100% {
        background-position: right
    }
}
Copy the code

Results show

Key points interpretation

The key point of this article is the use of the Steps function. The steps function can be used in many ways, as long as the animation of this particular step is implemented. There are many other ways that Steps can be used, and we will look at them several times in future posts.

Code has been uploaded to Github, welcome to issue.

Last rule, post my blog, welcome to follow