keyframe animationの滑らかな動きとアニメーション終了後の適用css

Question

おはようございます。基本的なことかもしれず恐縮ですが、

現在、＠keyframe animationで横に100%を2つの要素で分ける棒グラフの
アニメーションをcssで作成しております。animationのトリガーはページロードです。
下記のコードを作成してみました。

JSFiddle

1. 動きがカクカクもっさりとしているのですが、これは秒数と%区間の設定で解決するしかないのでしょうか？もっと滑らかな動きを想定しているのですが、%区間ごとに微妙に止まりながらカクカクしてしまうのですが

滑らかに動かす上でコツはあるのでしょうか？

1. アニメーションが終了した際に区間の最後のcssを適用したいのですが、初期値に戻ってしまいます。

下記の例で申し上げれば.aが最後にwidth:100%.bがwidth:0%で終わるのですが1s後にそれぞれ初期値の5width:50%に戻ってしまいます。ページロード時には50:50で1S後以降は100:0に継続して表示することは可能なのでしょうか？(JSは使用せずにCSSのanimationのみでという前提です)

もし、そもそも今回のようなアニメーションを作成する場合には@keyframe animationではなく他のやり方のほうが優れているというご意見等もあれば合わせてアドバイスを頂けるととても嬉しいです。事前に調べたのですがcssで実装する場合、transitionとanimationが出てきたので、一旦animationでコーディングをしてみた次第です。

よろしくお願い申し上げます。

<div class="main">
  <div class="a">A</div>
  <div class="b">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;
}

Answer 1

animation-timing-functionが指定されていないのでeaseになっています。
easeは最初と最後がゆっくりになるため、%区切りでカクつくように見えます。
回避方法は2つです。

A)
バーの動きが一定なので、途中の%表記をはずす。

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

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

B)
animation-timing-functionにlinearを指定する。

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

animation-fill-modeが指定されていないのでnoneになっています。
終了時点の状態を維持するならforwardsを指定します。

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

わからない箇所はリファレンスを参照してください。
https://developer.mozilla.org/ja/docs/Web/CSS/animation
https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function
https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode

Comments

[macaron_xxx]

リファレンス、は言いすぎかもしれませんね。
信頼のおけるソース元、に訂正。

[maguzo]

大変参考になり、また解決いたしました。
お力添えをいただき、ありがとうございます。

よろしくお願い申し上げます。