Wonderful! Animation can also be controlled like this?

Today, I saw such a problem in the group: there is an animation, which is still at the first frame at the beginning, only runs the animation when the user hovers, stops after running once, and stays at the last frame , which can be done using CSS What?

Like this:

A very interesting question, the answer is yes. Let's extract the key points:

1. The animation runs only once, at the first frame before it runs, and at the last frame after it runs
2. The animation is driven by the hover, and the animation only happens when the user hovers the element

animation-fill-mode controls the state of the element at various stages

First, the animation runs only once, at the first frame before it runs, and at the last frame after it runs.

This one just uses CSS animation animation-fill-mode: both .

1. animation-fill-mode: backwards : The style of the element before the animation starts is the first frame when the animation is running, and the style after the animation ends is restored to the style set by the CSS rules
2. animation-fill-mode: forwards : The style of the element before the animation starts is the style set by the CSS rules, and the style after the animation ends is calculated from the last keyframe encountered during execution (that is, stopped at the end one frame)

However, animation-fill-mode: both takes into account the characteristics of the above two modes, so that the style before the animation starts is the first frame when the animation is running, and stops at the last frame after the animation ends .

Reverse use animation-play-state to achieve hover trigger animation progress

The animation is driven by the hover, only when the user hovers the element, the animation will do this, just use animation-play-state .

We all know that under normal circumstances, the animation should be in the running state, then if we set the default state of the animation to pause, only when the mouse clicks or hovers, we set it animation-play-state: running , so that we can use hover controls the progression of the animation!

Based on the above two points, let's implement an interesting typing animation, so that the animation is only triggered once, and the animation will run only when the hover is over.

 <p>Hover Me - You are a pig!</p>

 p {
    position: relative;
    font-family: monospace;
    width: 26ch;
    animation: typing 3s steps(15, end);
    animation-fill-mode: both;
    animation-play-state: paused;
    overflow: hidden;
}
p:hover  {
    animation-play-state: running;
}
p::before {
    position: absolute;
    content: "";
    width: 4px;
    top: 0;
    bottom: 0;
    right: 0;
    animation: blink .8s linear infinite;
}
@keyframes blink {
    0%, 50% {
        border-right: 4px solid transparent;
    }
    50%, 100% {
        border-right: 4px solid #000;
    }
}
@keyframes typing {
    from {
        width: 11ch;
    }
    to {
        width: 26ch;
    }
}

By default, this interface is displayed:

Next, we put the mouse up and see what happens:

Interesting, it perfectly fulfills the requirements mentioned above - the animation is driven by the hover, and the animation is only carried out when the user hovers the element .

Of course, here are a few tricks to explain:

1. The typing animation uses frame-by-frame animation instead of tweening animation. It mainly uses CSS animation step-timing-function step easing function, which is the code steps(15, end)
2. ch is a relative unit in CSS that represents the width of the "0" glyph in the font used by the element
3. font-family: monospace宽字体，每个字符占据的宽度是一样， 26ch来<p>元素的宽度， Hover Me - You are a pig This text is exactly 26 characters including spaces, 26ch just means the length of this text
4. The text displayed at the beginning Hover me - counting the space is the width of 11ch , and at the end the entire text needs to be displayed 26ch width, the middle needs to go through 15 steps of frame by frame Animation, the elements here just correspond to the one-to-one correspondence in the code

With the help of the above 4 steps and the application of animation-fill-mode: both and animation-play-state: paused we introduced above, we have perfectly realized such a very interesting typing animation.

For the complete code, you can click here CodePen Demo -- running once animation by hover

If you want to have a more in-depth and detailed understanding of CSS animation, you can read this article of mine, which has a very detailed explanation of each attribute of animation: CSS animation in simple terms

At last

OK, this is the end of this article, I hope this article will help you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.