Use CSS3 to make animation effect of version head

Time:2021-12-2

Netease watch game official website( http://kanyouxi.163.com/ )(off the shelf) is a project I did before (2014), and it is also the first website that we abandoned flash and used HTML5 and animation. At that time, one of the few websites in the industry that used CSS3 for the actual production of main animation. Of course, it has been widely used now, especially on the mobile terminal, CSS3 is the guarantee of performance. Now summarize and share, which can not only let you review the old and know the new, but also hope to be helpful for beginners.

What kind of animation?

This animation is not complicated, but it contains several important contents: transform, rotate, translate, keyframes, jog, and cycle times. Well, let’s take a look at the animation effect first. The following is the screen animation. You can also go to Netease to see the official website of the game( http://kanyouxi.163.com/ )(off the shelf) go up and have a look.

There are several key points in order:

  • Flip the white iPhone up, and then do a few small shaking;
  • The caption appears from the right and pushes the white iPhone to the left;
  • After the white iPhone came to my heart, the black iPhone also appeared;
  • The background of the headline “Netease watch game” flickers and scrolls in waves.

Now let’s come one by one.

Note: This is a CSS3 advanced practice article. If you don’t know much about CSS3 animation, please see here first:CSS3 animation, 1 minute, get to know it quickly and come back.

1. Flip up and shake

Here are several key attributes. You can see the detailed usage methods:@keyframes transform:rotate(deg);transform-origin:x,y;

Prepare animation keyframes @ keyframes


@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    100% {
        transform:rotate(0deg); 
        transform-origin:125px 600px;
        }            
}

We directly use the percentile as the frame point, because it will be subdivided into multiple frames later.

Set rotation and anchor pointtransform-origin:x,y;


transform:rotate(-30deg);
transform-origin:125px 650px;

Rotation is necessary, but why modify anchor point?

Anchor point, borrowed from cocos2d, refers to the origin of transformation.

Because the default anchor point of transform is the center (50%, 50%), the anchor point attribute in transform istransform-origin, the following are the default values:


transform-origin:50%,50%

In the transformation that supports 3D, there is a third value: Z, which is 0 by default

If you don’t modify it, it will rotate with the center of the iPhone as the origin. This is not the effect we want, so move it to the horizontal center below.

The width of this picture is 250px, the height is 525px, and the lower center is (125px, 525px). However, in order to simulate the real object swinging on the table, we have to move it down. After trying, we finally chose (125px, 650px), as shown in the following figure:

Add jitter and simulacrum

Jitter is actually the product of the combination of several key frames. The first rotation is not 0 degrees, but a little 10 degrees. Then, two key frames are returned and the amplitude decreases gradually. The @ keyframes after adding keys are changed as follows:


@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    50% {
        transform:rotate(10deg);
        transform-origin:125px 600px;
        }
    75% {
        transform:rotate(-5deg);
        }
    100% {
        transform:rotate(0deg);
        }
}

Note that at the frame 33% above, a new line is addedtransform-origin:125px 600px;, because if the anchor point remains unchanged, it will feel like a pendulum, which is too rigid and not materialized. Imagine: a thing falls to the ground with a parabola, collides with the ground, changes the direction of movement, and finally stops slowly. Therefore, we reduce the height of the center point a little to make people look“Not so regular ”。

The slow out effect is also simulated at the time point of the key frame. The so-called animation feeling is good, that is, how the slow motion effect is done, and whether it is close to the cognition of the physical world.

This frame point is not the last time point, please continue to look down.

2. Subtitles appear and push away iPhone

Subtitles appear

The caption is in another element, so we create a new key frame group:


@keyframes content{
    0% { transform: translate3d(550px,0,0);}
    100% { transform: translate3d(0,0,0);}
}

Because the iPhone animation goes first and then the subtitle, the animation delay:


animation-delay:.2s;

However, in order to better synchronize the two key frame groups, we also do this without calculation:


@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

First hide it with transparency, start at 40%, and then gradually display it in the moving process to make the process smoother.

As mentioned earlier, I have to push the iPhone with subtitles in the middle. What should I do?

Simulated collision

Pure CSS3 cannot be done unless JS is used for the whole process or box2d is used for collision judgment. But here we are just a simple walkthrough animation, which does not require human-computer interaction and will not change the moving distance. Therefore, we use a trick, the two animations are parallel, and the key frames are buried at the key nodes, that is, the iPhone starts to move when the caption moves to the iPhone position.

The combination of the two keyframe groups is:

@keyframes iphone-front{
    0% {transform:rotate(-30deg); transform-origin:125px 650px; opacity: 0;}
    20% {transform:rotate(10deg); transform-origin:125px 600px; opacity: 1;}
    30% {transform:rotate(-5deg);}
    38% {transform:rotate(0deg);}
    60% {transform: translate3d(0,0,0);  opacity: 1;}
    90% {transform: translate3d(-340px,0,0); }
    100% {transform: translate3d(-340px,0,0);}
}
@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    60% { transform: translate3d(225px,0,0); opacity: 1; }
    80% { transform: translate3d(0,0,0); opacity: 1; }
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

/*The following selectors omit non animation attribute settings, such as width and height. Let's assume that they are the correct value by default*/
.iphone-front{ 
    animation: iphone-front 1.8s ease-out forwards;
}
.content{
    animation: content 1.8s ease-out;
}

It can be seen that the delay attribute is not used here to set parallel animation more intuitively. Everyone meets at 60% of the positions and uses ease out.

Why does the iPhone front repeat 90% of the content at 100% frames? Because we use the animation fill mode attribute with the value of forwards, that is, stop at the last frame. If 100% is not written, it will return to the original state.

3. The black iPhone appears

The animation of the black iPhone is simpler. It’s just a gradual appearance and movement. It’s also another parallel animation. However, you can use delay this time. First estimate the approximate time of occurrence, and you can get that it starts from 0.5s:


@keyframes iphone-back{
    0% { transform: translate3d(97px,0,0); opacity: 0;}
    40%{ opacity: 0; }
    50%{ transform: translate3d(0,0,0); opacity: 1;}
    100% {opacity: 1; }
}
.iphone-back-ani{
    animation: iphone-back 1.8s ease-out .5s forwards;
}

There is no need to write the code repeatedly in the last frame, because it is (0,0,0) and will not change.

Why translate 3D (x, y, z); Instead of translatex (x)? Because some people thought that this efficiency would be higher, especially in the mobile terminal.

View Manual:transform

4. Headline background

This does not involve transfrom, so that the foreground and background overlap together, and the background picture moves continuously on the y-axis, infinite cycle and no slow motion; The key is that the background image must be seamlessly connected up and down:


@keyframes title{
    0% { background-position: 0 0;}
    100% { background-position: 0 -76px;}
}

.title-bg{
    width: 301px; 
    height: 61px; 
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    background: url(title_text_bg.png) repeat-y;
    animation: title 1.2s linear;
    animation-iteration-count:infinite;
}
.title-front{
    width: 301px; 
    height: 61px;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    background: url(title_text_front.png) no-repeat;
}

This is the simplest approach and is suitable for most situations. There are also some more advanced ones, such as using mask. For more information about mask, please see《CSS Masking》 。

Other effects

epilogue

Handwritten animation, although time-consuming, can let you understand the principle of reality. If you need visual production, we recommend an online tool:cssanimate, compared with other generators, it has the advantage that multiple key frames can be set and can be operated directly by dragging the mouse. Recommended!

This is the end of this article about using CSS3 to make version header animation effects. For more information about CSS3 version header animation, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!