Netease look game official website (kanyouxi.163.com/) (has been removed), is my previous…

What kind of animation?

This animation is not complicated, but it contains transform, rotate, Translate, Keyframes, easing, and loop times. Well, first look at the animation effect, the following is the screen recording animation, you can also go to netease to see the official website of the game (kanyouxi.163.com/) (removed) to have a look.

There are several key points, in order:

  1. The white iPhone flips up and does a few small shakes;
  2. The caption appears from the right, pushing the white iPhone to the left;
  3. After the white iPhone came to my mind, the black iPhone followed.
  4. Title “netease see the game” background wave flashing rolling.

Now let’s take it one by one.

Note: This is a CSS3 advanced practice article, if you are not familiar with CSS3 animation, please see here first:CSS 3 animationOne minute for a quick overview and come back.

1. Flip upward and shake

@keyframes, transform:rotate(deg); , the transform – origin: x, y;

Prepare the animation keyframe @keyframes

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

We will use the percentage as the frame point directly, because we will subdivide it into multiple frames later.

Set rotation with Anchor Pointtransform-origin:x,y;)

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

Rotation is required, but why modify Anchor Point?

Anchor Point, borrowed from the saying in cocos2D, refers to the origin of transformation.

Since the default Anchor Point of a transform is the center, i.e. (50%,50%), the Anchor Point property of a transform is transform-origin, the default values are as follows:

transform-origin:50%,50%
Copy the code

In 3D enabled transformations, there is a third value: z, which defaults to 0

If left unmodified, it will rotate around the center of the iPhone, which is not what we want, so move it to the horizontal center below.

The image is 250px wide and 525px high, and the bottom center is (125px,525px), but in order to simulate the object swinging on the table, we have to move it down a bit. After trying, we finally chose (125px,650px), as shown below:

Add jitter and simulacra

Jitter is actually a combination of several key frames. The first rotation is not 0 degrees, but after a little bit of 10 degrees, and then two key frames back and forth, the amplitude gradually decreases. The @keyframes changes 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); }}Copy the code

Note that a transform-Origin :125px 600px has been added to the 33% frame above; , because if the fixed anchor, can give a person feels like a pendulum, too rigid is not be materialized, imagine: a thing with a parabolic fell to the ground, after a collision with the ground, change direction, finally stopped slowly, so we also reduce the height of the center point, let a person look less “rule”.

At the time point of the key frame, the effect of slow out is also simulated. How well the animation feels, that is, how well the easing effect is done, whether it is close enough to the perception of the physical world.

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

2. Subtitles appear and push the iPhone away

Subtitles appear

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

@frames content{0% {transform: translate3d(550px,0,0); } 100% {transform: translate3d(0,0,0); }}Copy the code

Animation-delay is executed because the iPhone animation goes first and then the subtitles.

animation-delay:.2s;
Copy the code

But in order to better synchronize the two keyframe 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; }}Copy the code

Hide it with transparency first, start at 40%, and gradually show it as it moves, making the process smoother.

Also mentioned above, the middle of the iPhone with subtitles to push, how to do?

To simulate the collision

Pure CSS3 won’t work unless you use JS for the whole thing, or Box2D for collision determination. However, it is just a simple cut-scene animation, which does not require human-computer interaction and does not change the moving distance. Therefore, we use a magic trick to bury key frames at key nodes, that is, when the subtitles move to the position of iPhone, iPhone starts to move.

The combination of the two keyframes 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%} {the transform: translate3d (0, 0); opacity: 1; 90%} {the transform: translate3d (- 340 px, 0, 0); 100%} {the transform: translate3d (- 340 px, 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; {animation: iphone-front ease-out forwards; animation: iphone-front ease-out forwards; animation: iphone-front ease-out forwards; animation: iphone-front ease-out forwards; }. Content {animation: content 1.8s ease-out; }Copy the code

As you can see, the delay property is not used here, in order to make the parallel animation more intuitive, everyone meets at 60%, and ease-out is used.

Why is 90% of the iPhone-front content repeated at 100% frames? Because we have animation-fill-mode property for forward, which is the value of forward for the last frame, and then if 100% is not written, it will revert back to the original state.

3. Black iPhone follows

The animation of black iPhone is simpler, just an fade and move, which is another parallel animation, but delay can be used this time. The approximate time of appearance can be estimated first, and it can be obtained from 0.5s:

@frames iphone-back{0% {transform: translate3d(97px,0,0); opacity: 0; } 40%{ opacity: 0; 50%} {the transform: translate3d (0, 0); opacity: 1; } 100% {opacity: 1; }}. Iphone-back-ani {animation: iphone-back 1.8s ease-out.5s forward; }Copy the code

There’s no need to repeat the code for the last frame, because it’s (0,0,0) and it doesn’t change anything.

Why use translate3d (x, y, z); Without translateX(x)? It was thought earlier that this would be more efficient, especially on mobile.

Check out the manual: Transform

4. Big title background waves

This does not involve transfrom, so that the foreground and background overlap, and the background image in the Y-axis uninterrupted movement, infinite loop, no slow; The key is that the background must be seamless:

@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: 1.2 s linear title; 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; }Copy the code

This is the simplest way to do it and works for most cases. There are other more advanced ones, such as the use of masks. For masks, see CSS Masking.

Other effects

conclusion

Hand-written animation, while time-consuming, gives you a sense of how reality works. Cssanimate allows you to animate multiple keyframes and drag them with the mouse.

【 the 】