How to write an animation in CSS (from basic animation to 3D animation)

I have seen many teaching videos before, most of the lecturers are about, and then began to indoctrinate knowledge. It was not until LATER that I saw a video of an excellent lecturer, whose lecture mode was the first class presentation. Then, when I saw the end result, I was motivated to keep learning.

Today I would like to follow the lecturer’s model, not say much, on the effect ~~

1. Simple gradient animation

2. Slightly complicated keyframe animation

3. Combine transform to achieve 3D animation effect

It looks ok and is very easy to learn.

Let’s take it one step at a time

transition

Transition is one of the highlights of CSS3, and it probably has some of the following attributes:

Transition-property – Specifies the name of the CSS property that sets the transition effect
Transition-duration – specifies how many seconds or milliseconds it takes to complete the transition effect
Transition-timing-function – Specifies the speed curve for the speed effect
Transition-delay – Defines when the transition effect starts

The general code is as follows, and some codes are omitted:

button { ... background-color: red; transition-property: opacity, background-color, border-radius; /* List separated by commas */ transition-duration: 0.5s; transition-timing-function: ease; /* Default speed effect */ transition-delay: 1s; . } button:hover { ... Opacity: 0.3; background-color: #fff000; border-radius: 100px; . }Copy the code

Of course, it’s a little bit tricky to write this, but of course you can simplify it:

button { 
 background-color: red; 
 transition: opacity  0.5 s 1s ease, background-color  0.5 s 1s ease, border-radius  0.5 s 1s ease; 
}Copy the code

Each comma separates four parameters: CSS properties, transition time, pause start time, and speed curve. Looks like there’s still a bit of trouble:

button { ... background-color: red; Transition: all 0.5s 1s ease; . }Copy the code

Doesn’t that make it look easier? Because in most cases, the various effects of our animation are generally carried out at the same time, and disappear at the same time, if the time is different, what will become an effect?

transition: opacity  0.5s 1s ease.background-color  1.5s 2s linear.border-radius  0.5s cubic-bezier(0215.. 0610.. 0355., 1);Copy the code

So we can replace all CSS properties with an all

Hee hee, this is not beautiful, the code is concise?

For transition-timing-function, there is a very useful website where you can debug your desired Bessel speed curve. Click GO! Check the effect. Copy the top code and use your code

Click here: I’m going to see the effects too!

animation + @keyframes

animation Is a cSS3 animation advanced, he cooperated
@keyframesTo achieve the more complex animation behavior you want.

Animation-name — specifies the name of the keyframe to bind to the selector
Animation-duration – Specifies how long the animation will take to complete, in seconds or milliseconds
Animation-timing-function specifies the speed curve of the animation
Animation-delay – Specifies the delay before the animation starts
Animation-rotund-count – Specifies the number of times the animation should play
Animation-direction – specifies whether the animation should take turns playing backwards
Animation – play – state – paused | running attribute specifies the animation is running or paused

Writing it one by one is still a bit complicated, so here’s the final code

button{
  animation: ani 5s 2s infinite ease;
}

@keyframes ani {
  20%{    opacity: 0.3;  }
  40%{    border-radius: 100px;  }
  60%{    background-color: #fff000; }}Copy the code

Keyframes is like you declared an animation function, and ANI is the name of your function. The animation just goes to the button and executes the function. The five parameters represent the name of the animation function, the transition time, the pause start time, the number of times the animation (infinite stands for infinite), and the speed curve.

Animation + transform 3 d animation

Finally, the most exciting moment. The previous simple animation may be most people can, but 3D animation may still be used by a small number of people, it involves some 3D ideas, may be more abstract to some children. But let’s take it a little bit today. In fact, very simple ~~

Without further ado, if we want to achieve a cube, of course we need 6 planes? (Emmmm, you can do it in kindergarten.)

Boss, give me six colorful divs!

<p> Objective, you want div: </p> <div class="aniBox"> <div class="ani1"></div> <div class="ani2"></div> <div class="ani3"></div> <div class="ani4"></div> <div class="ani5"></div> <div class="ani6"></div> </div> .aniBox { width: 220px; height: 220px; } .aniBox>div { width: 100%; height: 100%; } .ani1 { background: #4879dc; } .ani2 { background: #3bd168; } .ani3 { background: #e31653; } .ani4 { background: #1ed3eb; } .ani5 { background: #e9c80f; } .ani6 { background: #821fd3; }Copy the code

Ok, guest officer, this is your DIV, I will put you into a big div installed ~~

Here are the renderings…

?????

Boss Emmmm, you’re out of the bag. Wrap it up for me

.aniBox {
  position: relative;
  width: 220px;
  height: 220px;
}
.aniBox>div {
  position: absolute;
  width: 100%;
  height: 100%;
}Copy the code

Okay, all six divs are in one place, and now we have six faces; Use transform to rotate and shift it.

The red in the middle, you can imagine, is the plane of the document flow. Now you want to move the first div forward half the distance:

.ani1 {
  background: #4879dc;
  transform: translateZ(110px) Before / * * /
}Copy the code

Yi seems to have no change ah, I clearly#4879dc Has the color moved to the front? After some research, I finally found a property transform-style: preserve-3D, which specifies how to render nested elements in 3D space. It must be set to a parent element that has a transform and a child element that has a transform to see the effect.

Transform-style: flat — Child elements will not retain their 3D position
Transform-style: preserve-3D — Child elements will retain their 3D position

┗ | ` O ‘| ┛ ao ~ ~ so you understand:

.aniBox {
  position: relative;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
}Copy the code

Hahaha, it works.

Ok! Start the other five sides

.ani2 {
  background: #3bd168;
  transform: translateZ(-110px)  / * * /
}
.ani3 {
  background: #e31653;
  transform: rotateY(90deg) translateZ(110px)  / * * / right
}
.ani4 {
  background: #1ed3eb;
  transform: rotateY(-90deg) translateZ(110px)  / * * / left
}
.ani5 {
  background: #e9c80f;
  transform: rotateX(90deg) translateZ(110px)  / * * /
}
.ani6 {
  background: #821fd3;
  transform: rotateX(-90deg) translateZ(110px)  / * * /
}Copy the code

Hey, it seems to be blocked to see what effect ah ~~~ forget it let’s play directly in the console:

Ha ha, success, it seems to have an effect, ok let’s add animation to it ~~

.aniBox {
  position: relative;
  margin: 30px auto;
  transform-style: preserve-3d;
  width: 220px;
  height: 220px;
  animation: box-3d 5s infinite;
}
@keyframes box-3d {
  100% {
    transform: rotateX(360deg) rotateZ(-720deg)
     /* Make his end angles all integer multiples of 360 so he can look seamless */}}Copy the code

Gee, this animation seems to be going fast and then slow? Add linear to make it look even:

.aniBox {
  animation: box-3d 5s infinite linear;
}Copy the code

I thought I was done, but something just didn’t feel right. Searched on the net, ao ~~ still lack a near big far small effect!

Perspective — Property defines the distance, in pixels, of a 3D element from the view. This property allows you to change 3D elements to see the view of 3D elements. When the Perspective attribute is defined for an element, its children get perspective, not the element itself.

It’s hard to understand what emmmm says. Let me explain it to you with my own ideas.

I think of perspective as the distance between a house and a person. (uh ~~ still don’t understand, forget it, above!)

This is the cube, which you can use as the size of your room, and the perspective, which you can use as the distance between the red surface and the surface ABCD.

Since it is a room, we need to wrap the cube.

<div class="perBox">
      <div class="aniBox">
        <div class="ani1"></div>
        <div class="ani2"></div>
        <div class="ani3"></div>
        <div class="ani4"></div>
        <div class="ani5"></div>
        <div class="ani6"></div> </div> </div> .perBox { perspective: 800px; }Copy the code

Is stereo a lot ？？？？

What doesn’t seem to work??

This is easy to do. If you think about it, add a cup and put it in the middle of a room, and you stand at the window pane of a room, the smaller the room, the more concrete you see it? Ok, let’s make the house smaller!

.perBox {  perspective: 400px; }Copy the code

Oh, ho, ho, ho! That’s enough stereo! ?

What do you want to see inside this box? This div is 220px wide, so half of it is 110px;

So, as long as we are less than 110px, we can see inside? Try to ~ ~

.perBox {  perspective: 100px; }Copy the code

Ah-ha-ha, are you dizzy? Have graphics card burning feeling!! ?

Burn your GPU!

So that’s the end of our animation, let’s look at the compatibility of perspective:

Oh no, terrible.

Add a few fun demos:

Github.com/evelope/CSS…

Github.com/evelope/My-…

How to write an animation in CSS (from basic animation to 3D animation)

1. Simple gradient animation

2. Slightly complicated keyframe animation

3. Combine transform to achieve 3D animation effect

transition

animation + @keyframes

Animation + transform 3 d animation

Related Posts

Front-end knowledge summary VUE

Vue + egg.js +TS practical message push (a) : websocket

The React routing