Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

Recently, I learned the transition and animation of VUE and found that I did not know much about the transition and animation of CSS3 and did not use it much in the project. Now I will start to supplement my knowledge.

transition

Transition has five properties:

  • transition: is itself a property of the other four propertiesUse a combination of.
  • transition-property: Which elements we want to targetattributeMake transitions, such as:Width, height, colorAnd so on.
  • transition-duration: The whole transitionThe duration of the.
  • transition-delay: Delays the validity.
  • transition-timing-function: Do you want to start fast or finish fast throughout the transitionspeed.
  1. Linear: Motion at a constant speed.
  2. Ease: Speed up movement — slow down.
  3. Ease-in: to speed up exercise.
  4. Ease-out: slow down.
  5. Ease-in-out: Slow at the beginning, slow at the back, fast in the middle.
  6. Cubic – Bezier (n,n,n,n): user-defined.

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

This is a combination of all the properties of the animation. The attributes are similar to transitions such as iteration-count, direction, fill-mode, and play-state.

So let’s talk about the name: this is not the same as the transition, which only writes one attribute, but here it says an object can write many attributes at sign keyframes

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>animation</title>
</head>
<style>
  div {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    DivMove is the name behind @keyframes */
    animation: divMove 10s; 
  }
  @keyframes divMove {
    /* this means 0% to 100% of the process and we've defined 10s to mean that we're going to change this element over the course of 10 seconds, but of course you only want to start and end with from to */
    0% {margin: 0px;background-color: chocolate; }25% {margin: 25px;background-color: cornflowerblue; }50% {width: 200px;height: 200px; }100% {margin: 0; background-color: cadetblue;}
  }
</style>
<body>
  <div>hello animation</div>
</body>
</html>
Copy the code

Direction: Normal we are from –> to(0% –> 100%) so with this direction we can implement to –> from(100% –> 0%).

  1. Normal: From –> to is played normally by default.
  2. Reverse: Play to –> from in reverse.
  3. Alternate: (1, 3, 5) positive, (2, 4, 6) used in conjunction with iteration-count
  4. Alternate-reverse: the reverse of the above

Play-state: Animation pauses and starts.

Add code:

 div:hover {
    animation-play-state: paused;
  }
Copy the code

Fill-mode: indicates whether we want the final 100% attribute of @keyframes. None: The default value is no. Forwards: Want the last attributes of animation.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>animation</title>
</head>
<style>
  div {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    DivMove is the name behind @keyframes */
    animation: divMove 10s; 
    animation-fill-mode: forwards;
  }
  @keyframes divMove {
    /* this means 0% to 100% of the process and we've defined 10s to mean that we're going to change this element over the course of 10 seconds, but of course you only want to start and end with from to */
    0% {margin: 0px;background-color: chocolate; }25% {margin: 25px;background-color: cornflowerblue; }50% {width: 200px;height: 200px; }100% {width:300px;height:300px;margin: 0; background-color: red;}
  }
  div:hover {
    animation-play-state: paused;
  }
</style>
<body>
  <div>hello animation</div>
</body>
</html>
Copy the code

Finally, it turns red and has a width and height of 300px

Backwards: used in teams with animation-delay.

First let’s look at using animation-delay only:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>animation</title>
</head>
<style>
  div {
    height: 100px;
    width: 100px;
    background-color: cadetblue;
    DivMove is the name behind @keyframes */
    animation: divMove 10s; 
    /* animation-fill-mode: backwards; * /
    animation-direction: reverse;
    animation-delay: 3s
  }
  @keyframes divMove {
    /* this means 0% to 100% of the process and we've defined 10s to mean that we're going to change this element over the course of 10 seconds, but of course you only want to start and end with from to */
    0% {margin: 0px;background-color: chocolate; }25% {margin: 25px;background-color: cornflowerblue; }50% {width: 200px;height: 200px; }100% {width:300px;height:300px;margin: 0; background-color: red;}
  }
  div:hover {
    animation-play-state: paused;
  }
</style>
<body>
  <div>hello animation</div>
</body>
</html>
Copy the code

I’m animating it backwards here just for a few seconds when it stops and then all of a sudden it turns red which is kind of weird. So using backwards.

Here, animation-direction: reverse takes the property value of to(100%).

If animation-direction: normal takes the property value from(0%).

Both: backwards and forwards. You can pick up the attributes of to and from, and get the final animations

conclusion

The transition has four parameters. Animation has several attributes that you need to use in conjunction with @keyframes.

Finally, I hope everyone’s page is more smooth.