Using CSS3 to create header animation effects

Netease Kanyouxi official website (http://kanyouxi.163.com/) (has been removed from the shelves) is a project I worked on before (2014). It was also our first website to abandon Flash and adopt HTML5 to produce animations. At that time, it was one of the few websites in the industry that used CSS3 for the actual production of main animations. Of course, it is now widely used, especially on mobile terminals. CSS3 is a guarantee of performance. Now I will summarize and share it, which will not only allow me to review what I have learned but also hopefully help beginners to advance.

What kind of animation?

This animation is not complicated, but it includes several important contents such as transform, rotate, translate, keyframes, easing, and number of loops. Okay, let’s take a look at the animation effects first. Below is the screen recording animation. You can also go to the official website of NetEase Kanyouxi (http://kanyouxi.163.com/) (now off the shelves) to take a look.

There are several key points, in order:

• The white iPhone flips upwards and then shakes slightly;
• Subtitles appear from the right, pushing the white iPhone to the left;
• When the white iPhone was almost in my mind, the black iPhone also appeared;
• The big title "Watch Games on NetEase" flashes and scrolls in the background in a wave-like manner.

Let's take them one by one.

Note: This is an advanced CSS3 practice article. If you don’t know much about CSS3 animation, please read here first: CSS3 animation, take a quick look in 1 minute and come back.

1. Flip up and shake

There are several key attributes here, you can see the detailed usage: @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 percentage as the frame point, because it will be subdivided into multiple frames later.

Set the rotation and Anchor Point (anchor point transform-origin:x,y; )

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

Rotation is necessary, but why modify the Anchor Point?

Anchor Point is borrowed from cocos2D and refers to the origin of the transformation.

Because the default anchor point of transform is the center, that is, (50%, 50%), the Anchor Point property in transform is transform-origin . The following are the default values:

transform-origin:50%,50%

In transforms that support 3D, there is a third value: z, which defaults to 0

If it is not modified, it will rotate around the center of the iPhone, which 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 center below is (125px, 525px). However, in order to simulate the real object swaying on the table, we need to move it down a bit. After trying, we finally chose (125px, 650px), as shown below:

Adding jitter and skeuomorphism

The jitter is actually the product of a combination of several key frames. The first rotation is not 0 degrees, but a little bit past 10 degrees, and then it goes back and forth between two key frames, and the amplitude gradually decreases. After adding the keyframes, the @keyframes changes are 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 33% position above, a transform-origin:125px 600px; is added. This is because if the anchor point remains unchanged, it will feel like a pendulum, which is too rigid and not realistic enough. Imagine: an object falls to the ground in a parabola, collides with the ground, changes its direction of movement, and finally stops slowly. Therefore, we reduce the height of the center point a little to make it look " less regular ".

At the time point of the key frame, the slow-motion effect is also simulated. The so-called quality of the animation refers to how well the easing effect is done and whether it is close enough to the perception of the physical world.

This frame point is not the last time point, please continue reading.

2. Subtitles appear and the iPhone is pushed away

Subtitles appear

The subtitles are in another element, so we create a new keyframe group:

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

Because the iPhone animation comes first, followed by the subtitles, the animation delay is executed with animation-delay:

animation-delay:.2s;

But in order to better synchronize the two keyframe groups, without having to calculate, we can also do this:

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

Hide it with transparency first, start at 40%, and then gradually show it during the movement to make the process smoother.

As mentioned before, we need to use subtitles to push the iPhone in the middle. How to do it?

Simulating collisions

This cannot be done with pure CSS3, unless JS is used throughout the process, or Box2D is used for collision judgment. But here we just have a simple walkthrough animation, which does not require human-computer interaction and will not change the moving distance. Therefore, we use a magic trick to run two animations in parallel and bury key frames at key nodes, that is, when the subtitles move to the iPhone position, the iPhone starts to move.

The two keyframe groups combined are:

@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 property settings, such as width and height, so we assume that they are the correct values ​​by default*/
.iphone-front{ 
    animation: iphone-front 1.8s ease-out forwards;
}
.content{
    animation: content 1.8s ease-out;
}

As you can see, the delay attribute is not used here in order to set up parallel animation more intuitively. Everyone meets at the 60% position and uses ease-out.

Why does 90% of the content on the iPhone-front repeat at 100% of the frame? Because we used the animation-fill-mode property with a value of forwards, it stops at the last frame. If 100% is not written, it will return to the initial state.

3. Black iPhone follows

The animation of the black iPhone is simpler, just a fade-in and move. It is also another parallel animation, but this time I can use delay. I estimate the approximate time of the appearance and get it starting 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 repeat the code for the last frame, because it is already (0,0,0) and no changes will occur.

Why use translate3d(x,y,z); instead of translateX(x)? Because some people previously believed that this would be more efficient, especially with better performance on mobile devices.

See the manual: transform

4. Big title background wave

This does not involve transfrom, allowing the foreground and background to overlap, and the background image moves continuously on the y-axis, in an infinite loop, without easing; the key is that the background image must be seamlessly connected from top to bottom:

@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 masks. If you are interested in masks, please read "CSS Masking".

Other effects

Conclusion

Handwritten animation, although time-consuming, allows you to understand the principles of reality. If you need visual production, I recommend an online tool to everyone: cssanimate. Compared with other generators, its advantage is that you can set multiple keyframes and can directly operate by dragging the mouse. It is recommended!

This is the end of this article about using CSS3 to create header animation effects. For more relevant CSS3 header animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!