“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

Preface:

As she got off work… Let’s go! We can learn from this case

• The use of animation
• Understanding of transform related properties
• Animation keyframe optimization

Let’s start with an image:

xdm.. Nice bag Denver!

implementation

The first idea is to create a separate class that can be added directly to the element when the rollover effect is needed. For the CSS properties that need to be used, let’s consider first creating the action via animation and creating the animation @keyFrames to control the steps in the CSS animation sequence.

One, the static part

In fact, there is nothing to say about this section. In the previous section, we mentioned that adding the rollover effect class can make the element achieve the effect, so it does not matter what element! Let’s add a random rectangle.

<div class="anime-flip"><div>
Copy the code

Second, dynamic part

Let’s take a look at the animation process, from simple to optimized.

Simple:

Rotate the element 360deg around the vertical axis. Create the animation and set the flip (@KeyFrames) process to rotate within the specified period of time using the rotateY property.

.anime-flip{animation: flip 1.5s 1 ease-in-out; } @keyframes flip{ 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); }}Copy the code

The effect is as follows:

Now that I’ve done a simple rotation of elements, I’m just going to use transition. .

Optimization:

We observed that the renderings are relatively smooth, with fast and slow size scaling and other transition effects, so let’s start. Step 1: Rotate once, then zoom, then rotate. Just like a beautiful woman dancing! Everybody likes it!

.anime-flip{animation: flip 1.5s 1 ease-in-out; } @frames flip {-webkit-transform: perspective(1200px) scaleX(1) rotatez (0) rotateY(-1turn); transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } -webkit-transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-190deg); transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-170deg); transform: perspective(1200px) scaleX(1) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% {-webkit-transform: perspective(1200px) scale3D (0.95, 0.95, 0.95) translateZ(0); Transform: Perspective (1200px) scale3D (0.95, 0.95, 0.95) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(0deg); transform: perspective(1200px) scaleX(1) translateZ(0) rotateY(0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; }}Copy the code

Ps: To this is about the same, in fact, optimization is details and details, to every small action! At the code level, try to avoid using left top for panting. Here we use translateZ instead, and scale3D for scaling and so on.

A closer look at the code reveals several important points:

Some understanding of the transform-related properties we talked about at the beginning; Perspective specifies the distance between the observer and the z=0 plane so that elements with 3d position transformations can have perspective effects! Scale3d (SX, SY, SZ) adjusts the dimensions of elements in 3D space. Animation-timing-function defines the execution rhythm for each animation cycle or interval of a single key frame. In addition, if you are careful, you may find that animation-timing-function can be used in animation as well as in key frames. Its parameter value also involves a very interesting thing — Cubic bezier curve. Above are attached to the more authoritative document links, not to say more.

At the end

So with this little example we’re going to throw out a little thought about CSS animations which properties are animatable? What’s the difference between transition and animation? What is a Bezier curve? Finally: what animation libraries are there to use?