PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

Writing in the front

The Year of the Tiger is here. Our tiger year first play, is to use frame animation to achieve is a relatively simple tiger tiger animation. During development in 2021, I rarely wrote anything in frame animation. 2022, let’s play with frame animation to make the most sophisticated effects.

What is frame animation

Let’s take a look at MDN’s explanation: Control intermediate steps in A CSS animation sequence by styling keyframes (or waypoints) in the animation sequence. In contrast to Transition, keyframes control the intermediate steps of an animation sequence. In fact, my understanding is, can manipulate the execution of an animation.

How to use frame animation

First, there are multiple properties in the animation syntax

Animation grammar
animation-name Specifies the name of the KeyFrame to bind to the selector
animation-duration Specifies the time, in seconds or milliseconds, to complete the animation.
animation-timing-functin Specifies the speed curve of the animation.
animation-delay Specifies the delay before the animation begins
animation-iteration-count Specifies the number of times an animation should be played
animation-direction Specifies whether the animation should take turns playing backwards.


So a keyframe is an animation property that defines an animation name and is used by animation-name.
So, how do you use keyFrame to define an animation name? 
 @keyframes roll-in-left {
        0% {
            transform: translateX(-800px) rotate(-540deg);
            opacity: 0* *; * *}100% {
            transform: translateX(0) rotate(0deg);
            opacity: 1; }}Copy the code




















    .roll-in-left {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: red;
        animation: roll-in-left 1s ease-out both;
    }
Copy the code

Finally, we insert a picture, set the position, and set the size of the element

  <div class="roll-in-left">
        <img src="./pic.png" alt="">
    </div>
Copy the code

So let’s see how it works

As simple as that, a very easy spinning tiger appeared.

The last

Frame animation, in fact, there are many more gorgeous use, to achieve a variety of effects. But as far as I know, Keyframes are not compatible with IE very well. At this point, you may need to use JS to write a set of animation effects compatible with IE