Home>

Good morning. It may be basic, but

Currently, a bar graph that divides 100% horizontally by two elements in @keyframe animation Animation is created with css. The trigger of animation is page load.
I created the following code.

JSFiddle

1) The movement is crisp, but can this be solved by setting seconds and% intervals? I'm assuming a smoother movement, but it crawls while stopping slightly every% interval
Are there any tips for moving smoothly?

2) I want to apply the css at the end of the section when the animation ends, but it will return to the initial value.
In the example below, .a ends with width: 100% .b ends with width: 0%, but after 1s it will return to the initial value of 5width: 50% respectively. Is it possible to continue displaying at 100: 0 after 1S after loading page at 50:50? (It is assumed that only CSS animation is used without using JS)

In the first place, if I want to create an animation like this one, I would be very happy if you can give me some advice if there is an opinion that other methods are better than @keyframe animation. I checked in advance, but when implementing with css, transition and animation came out, so I decided to code with animation once.

Thank you.

<div>
  <div>A</div>
  <div>B</div>
</div>
. main {
  width: 300px;
  display: flex;
}
.a {
  background: blue;
  width: 50%;
}
.b {
  background: red;
  width: 50%;
}
@keyframes my_anime1 {
  0% {
    width: 50%;
  }
  20% {
    width: 60%;
  }
  40% {
    width: 70%;
  }
  60% {
    width: 80%;
  }
  80% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}
@keyframes my_anime2 {
  0% {
    width: 50%;
  }
  20% {
    width: 40%;
  }
  40% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  80% {
    width: 10%;
  }
  100% {
    width: 0%;
  }
}
.a {
  animation: my_anime1 1s;
}
.b {
  animation: my_anime2 1s;
}
css
  • Answer # 1

    1)
    Sinceanimation-timing-functionis not specified, it isease.
    Sinceeaseis slow at the beginning and end, it looks like it's cluttered with% separators.
    There are two workarounds.

    A)
    Since the movement of the bar is constant, remove the% notation in the middle.

    @ keyframes my_anime1 {
      0% {
        width: 50%;
      }
      100% {
        width: 100%;
      }
    }
    @keyframes my_anime2 {
      0% {
        width: 50%;
      }
      100% {
        width: 0%;
      }
    }


    B)
    Specifylinearinanimation-timing-function.

    . a {
      animation: my_anime1 1s linear;
    }
    .b {
      animation: my_anime2 1s linear;
    }

    2)
    Sinceanimation-fill-modeis not specified, it isnone.
    Specifyforwardsto keep the state at the end.

    . a {
      animation: my_anime1 1s forwards;
    }
    .b {
      animation: my_anime2 1s forwards;
    }

    Please refer to the reference if you are unsure.
    https://developer.mozilla.org/en/docs/Web/CSS/animation
    https://developer.mozilla.org/en/docs/Web/CSS/animation-timing-function
    https://developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode