A basic understanding of

There are two ways to implement animations in CSS: Transition animation and animation custom animation.

This article focuses on the use of animation. To learn about Transition animation, go to Transition Animation.

Let’s first briefly understand some syntax and usage process of animation, which will be explained in detail later:

  1. through@keyframesCustom keyframe animation and name the animation where you can set each frame.
  2. Use custom animation elements that need to be passedanimationRelated properties are configured
    • animation-name
    • animation-duration
    • animation-timing-function
    • animation-delay
    • animation-iteration-count
    • animation-direction
    • animation-fill-mode
    • animation-play-state

We can also access/set animation properties in JavaScript using camel name.

@keyframes

Keyframes. In CSS stylesheets, you can set keyframes by @keyframes and specify the animation name for the user to lock.

The syntax is as follows:

We can use percentages to style specific frames.

@keyframes animateName{
    0%   { width:50px; height:50px; }	
    50%  { width:100px; height:100px; }	
    100% { width:50px; height:50px; }}Copy the code

0% and 100% represent the first and last frames, which can also be replaced by from and to respectively. The following code has the same effect as above

@keyframes animateName{
    from { width:50px; height:50px; }	
    50%  { width:100px; height:100px; }	
    to	 { width:50px; height:50px; }}Copy the code

Note that if the custom animation does not define the first and last frames, the first and last frames will apply the user’s original style

Now that the animation is defined, the user needs to configure the animation properties.

animation-name

If an element wants to use an animation with its name, the animation-name: animateName attribute is configured to lock the element.

Take a simple animation as an example:

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: pink;
    animation-name: test;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  @keyframes test {
    50% {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: skyblue; }}</style>
<body>
  <div class="box"></div>
</body>
Copy the code

In order to make the animation more obvious, animation-duration and animation-rotund-count are used. Here is a brief introduction:

  • animation-durationUsed to define animation duration, default0s
  • animation-iteration-countUsed to define the number of iterations of an animation, that is, the number of executions. Default is1.

animation-duration

Animation-duration As the name suggests, used to set the animation duration.

Note that the default value is 0s, that is, if animation-duration is not configured, there is no animation effect by default. Even if animation-name is used to lock the animation name, the animation duration is 0s, so there is no effect.

Animation – timing – function:

Animation-timing-function Specifies the time function. With this option, you can configure the animation speed and trajectory over time.

value describe
linear The speed of the animation is the same from beginning to end.
Ease The default value: The animation starts at a low speed, then speeds up and slows down before ending.
ease-in The animation starts at a low speed.
ease-out The animation ends at a low speed.
ease-in-out The animation starts and ends at low speed.
cubic-bezier(n.n.n.n) Bezier curve (custom value), available toRelated websitesVisual Settings.

Effect display:

<style>
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #34495e;
  }
  ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    display: flex;
  }
  ul > li {
    width: 40%;
    margin: 0px 40px;
    position: relative;
  }
  ul > li > .fa {
    font-size: 4em;
    color: white;
    opacity: 0.8;
    animation: test 2s infinite;
  }
  @keyframes test {
    to {
      transform: translateY(86vh); }}ul > li:nth-of-type(1) > .fa {
    animation-timing-function: linear;
  }
  ul > li:nth-of-type(2) > .fa {
    animation-timing-function: ease;
  }
  ul > li:nth-of-type(3) > .fa {
    animation-timing-function: ease-in;
  }
  ul > li:nth-of-type(4) > .fa {
    animation-timing-function: ease-out;
  }
  ul > li:nth-of-type(5) > .fa {
    animation-timing-function: ease-in-out;
  }
  ul > li:nth-of-type(6) > .fa {
    animation-timing-function: cubic-bezier(0.29.1.69.0.39, -0.05);
  }
  li > span {
    position: absolute;
    color: #f1c40f;
  }
  strong {
    color: #e67e22;
    margin: 10px;
  }
</style>
<body>
  <strong>animatin-timing-function:</strong>
  <ul>
    <li>
      <span>linear<br />linear</span>
      <div class="fa">👇</div>
    </li>
    <li>
      <span>ease<br />The default. The animation starts at a low speed, then speeds up and slows down before ending.</span>
      <div class="fa">👇</div>
    </li>
    <li>
      <span>ease-in<br />Start at a low speed</span>
      <div class="fa">👇</div>
    </li>
    <li>
      <span>ease-out<br />End at a low speed</span>
      <div class="fa">👇</div>
    </li>
    <li>
      <span>ease-in-out<br />Start and finish at a low speed</span>
      <div class="fa">👇</div>
    </li>
    <li>
      <span>cubic-bezier()<br />Bessel curve (custom value)</span>
      <div class="fa">👇</div>
    </li>
  </ul>
</body>
Copy the code

animation-delay

Animation-delay Sets the animation delay, in seconds

The following animation will be executed after 2s

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  animation-name: test;
  animation-duration: 1s;
  animation-delay: 2s;
}
@keyframes test {
  50% {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue; }}Copy the code

When multiple animations are used at the same time, this property is used very frequently to define the delay time for each animation in turn, distinguishing each animation.

Of course, you can also set other animation family properties for each animation, which will be discussed later.

Animation – iteration – count:

Animation-rotund-count sets the number of times the animation is executed. The default value is 1.

Its values can be divided into two types:

  • Specific number
  • infinite: Execute an infinite number of times

animation-direction

Animation-direction sets the animation direction. In particular, it can be set to the following values:

value describe
normal The default value. Press the animation to play normally.
reverse The animation plays in reverse.
Alternate (v.) Animation alternate forward execution (forward -> reverse) Loop.
alternate-reverse Animation alternate in reverse (reverse -> forward) Loop.
inherit Inherits the attribute from the parent element.

Effect display:

<style>
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #34495e;
    justify-content: center;
    align-items: center;
  }
  ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    width: 300px;
    height: 300px;
    justify-content: center;
    align-items: center;
  }
  ul > li {
    margin: 0px 40px;
    /* border: 2px solid #ddd; * /
    display: flex;
    flex-direction: column;
    color: #e74c3c;
    justify-content: center;
    align-items: center;
  }
  ul > li > .fa {
    animation: test 1.3 s infinite;
    font-size: 7em;
  }
  ul li:nth-of-type(1) > .fa {
    animation-direction: normal;
  }
  ul li:nth-of-type(2) > .fa {
    animation-direction: reverse;
  }
  ul li:nth-of-type(3) > .fa {
    animation-direction: normal;
  }
  ul li:nth-of-type(4) > .fa {
    animation-direction: reverse;
  }
  @keyframes test {
    100% {
      transform: scale(1.7); }}h1 {
    color: white;
    opacity: 0.8;
  }
  li > span {
    font-size: 24px;
    margin: auto;
    margin-top: 30px;
  }
  body ul:nth-of-type(2) li:nth-of-type(1) > .fa {
    animation-direction: alternate;
  }
  body ul:nth-of-type(2) li:nth-of-type(2) > .fa {
    animation-direction: alternate-reverse;
  }
  strong {
    font-size: 20px;
    color: white;
    opacity: 0.76;
  }
</style>
<body>
  <h1>animation-direction:</h1>
  <ul>
    <li>
      <div class="fa">❤</div>
      <span>normal</span>
      <p>Default value/Forward</p>
    </li>
    <li>
      <div class="fa">❤</div>
      <span>reverse</span>
      <p>Animation in reverse</p>
    </li>
  </ul>
  <strong
    >You can use the default values normal and reverse, cross animation,<br />It can also be reversed and reversed as follows. </strong ><ul>
    <li>
      <div class="fa">❤</div>
      <span>alternate</span>
      <p>Repeated alternation (positive)</p>
    </li>
    <li>
      <div class="fa">❤</div>
      <span>alternate-reverse</span>
      <p>Repeated alternation (reverse)</p>
    </li>
  </ul>
</body>
Copy the code

animation-fill-mode

Animation-fill-mode is used to set the filling mode of animation. The main applied property values are:

value describe
none The default value. The animation does not apply any styles to the target element before or after the animation is executed.
forwards After the animation (Determined by the animation – iteration – count), the target element will remain appliedThe last frameThe animation.
backwards After the animation (Determined by the animation – iteration – count), the target element will remain appliedThe starting frameThe animation.

Case tests:

In the following code, the style of the last frame will be applied after the animation is finished.

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  animation-name: test;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  /* animation-iteration-count: infinite; * /
}
@keyframes test {
  100% {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue; }}Copy the code

Note: if you add animation-rotund-count: infinite to the code above, the last frame style will not be applied because the animation will not end up being executed indefinitely

animation-play-state

The execution state of an animation can be set, usually dynamically controlled through JavaScript.

  • The default value is:running
  • Set topaused(Pause), the animation will stop executing.

The following animation will not be executed

.box {
  width: 50px;
  height: 50px;
  background-color: pink;
  animation-name: test;
  animation-delay: 2s;
  animation-duration: 1s;
  animation-play-state: paused; // paused will not execute}@keyframes test {
  50% {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue; }}Copy the code

Dynamic control via JavaScript:

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: pink;
    animation-name: test;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  @keyframes test {
    50% {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: skyblue; }}</style>
<body>
  <div class="box"></div>
  <button onclick="operation('running')">start</button>
  <button onclick="operation('paused')">stop</button>
  <script>
    function operation(mode) {
      document.querySelector("div").style.animationPlayState = mode;
    }
  </script>
</body>
Copy the code

Multiple animation accumulations

If the element is applied to multiple animations, we can control the properties of each animation to achieve the effect of distinguishing between animations.

In the following example, set multiple values for each animation family property to make different configurations for different animations.

If multiple values are set for the animation family property, the values are separated from each other.

Case study:

  1. The first to useanimation-nameTo lock down the individual animations used
  2. And then use something elseanimationFamily property, respectively constrain the corresponding animation, and set the order andanimation-nameUse animations in the same order.
<style>
  * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }
  body {
    background-color: #353b48;
  }
  main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #487eb0;
    animation-name: bgcolor, bodera, rotat;
    animation-duration: 2s.2s.3s;
    animation-iteration-count: 2.2.1;
    animation-direction: reverse, normal, normal;
    animation-fill-mode: forwards, forwards, forwards;
  }
  main::after {
    content: "The Trouble of Asonte.";
    color: white;
    animation: opcity 2s;
    opacity: 0;
    font-size: 1.5 em;
    animation-fill-mode: forwards;
    animation-delay: 4s;
  }
  @keyframes opcity {
    25% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.6;
    }
    100% {
      opacity: 0.8; }}@keyframes bgcolor {
    25% {
      background-color: #fbc531;
    }
    50% {
      background-color: #8c7ae6;
    }
    75% {
      background-color: #f5f6fa;
    }
    100% {
      background-color: #e84118; }}@keyframes bodera {
    25% {
      border-radius: 10%;
    }
    50% {
      border-radius: 25%;
    }
    75% {
      border-radius: 38%;
    }
    100% {
      border-radius: 50%; }}@keyframes rotat {
    25% {
      transform: rotate(30deg);
    }
    50% {
      transform: rotate(60deg);
    }
    75% {
      transform: rotate(120deg);
    }
    100% {
      transform: rotate(360deg); }}</style>
<body>
  <main></main>
</body>
Copy the code

Key code parsing:

 main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #487eb0;
    animation-name: bgcolor, bodera, rotat;
    animation-duration: 2s.2s.3s;
    animation-iteration-count: 2.2.1;
    animation-direction: reverse, normal, normal;
    animation-fill-mode: forwards, forwards, forwards;
  }
  main::after {
    content: "The Trouble of Asonte.";
    color: white;
    animation: opcity 2s;
    opacity: 0;
    font-size: 1.5 em;
    animation-fill-mode: forwards;
    animation-delay: 4s;
  }
Copy the code

In order to make the text display after all other animations have been executed, we set the animation-delay for the text animation, but we need to determine the animation end time, how to calculate?

We know that when multiple animations are applied, they are also executed concurrently, so we just need to know which animation takes the longest to execute.

We need to analyze this code:

animation-duration: 2s, 2s, 3s;
animation-iteration-count: 2, 2, 1;
Copy the code

Execution times x single execution time = Total animation time. So the maximum time = Max (2×2,2×2, 3×1)=4s

Therefore, text animation is delayed by 4s.

The last

Original article, writing is limited, talent and learning shallow, if the article is not straight, speed to inform.

This is the end of this article, I hope to help you, I am Ashun, a college student, determined to become a senior front-end engineer, welcome to communicate and learn together. Please stay tuned for more updates