CSSアニメーションを作成する時、アニメーションの途中で画面の端に消えて行って、反対側の端から出てくるなど、

CSSアニメーションの基本

まず、CSSアニメーションの基本をおさらいしておきましょう。

animation-name : アニメーション名を指定

一番大切なアニメーションを指定するプロパティです。
@keyframesで定義したアニメーション名を指定します。

// アニメーションさせる要素
.animation_element {
    animation-name: move;
}

// アニメーションの内容
@keyframes move {
    0% {}
    100% {}
}

animation-duration : アニメーション1回の所要時間を設定

アニメーションが1回動作するまでの所要時間を設定できます。
〇s（seconds, 秒）単位で設定することが可能で、1秒以下のアニメーションは0.5などを設定すると良いです。

.animation_element {
    animation-name: move;
    animation-duration: 5s; // 5秒かけて移動する
}

animation-timing-function : アニメーションスピードのモードを指定

こちらのスピードはアニメーション全体の所要時間ではなく、速度変化を指定します。

.animation_element {
    animation-name: move;
    // 以下いずれか
    animation-timing-function: linear; // 等速運動
    animation-timing-function: ease; // ゆっくり動き始めて、アニメーションの中間で早くなり、ゆっくり終わる
    animation-timing-function: ease-in;
    animation-timing-function: ease-out;
}

animation-iteration-count : アニメーションの動作回数

アニメーションが何回動くかを指定します。
無制限（infinite）を指定することが多いと思いますが、例えば、バウンドするようなアニメーションではanimation-iteration-count: 2;などを指定したりします。

.animation_element {
    animation-name: move;

    animation-iteration-count: infinite; // 回数無制限
    animation-iteration-count: 3; // 3回
}

animation-direction : アニメーションの順（向き）

keyframesに設定したアニメーションは通常0%から100%に向かってアニメーションするものですが、この順を入れ替えたり、交互に入れ替えることができます。

.animation_element {
    animation-name: move;
    // 以下いずれか
    animation-direction: normal; // 0% → 100% 正順
    animation-direction: reverse; // 100% → 0% 逆順
    animation-direction: alternate; // 0% → 100% → 0%を交互に移動
}

animation-fill-mode : アニメーション後の状態

アニメーションが動作を終えた後、どういう状態になるかを設定します。
例えば、アニメーションを終えた後、keyframesの100%の状態（アニメーションの最後）で止めておきたいのか、keyframesの0%の状態（初期状態）に戻したいのかを定義できます。

.animation_element {
    animation-name: move;
    // 以下いずれか
    animation-fill-mode: forwards; // アニメーションの最後の状態で停止する
    animation-fill-mode: backwards; // アニメーションの初期状態に戻って停止する
}

なお、animation-iteration-countがinfiniteになっている場合は、そのまま次のアニメーションが始まるため、どっちに設定しても同じ動きしているように思います。

animation-delay : アニメーションが動き始めるまでの待機秒数

アニメーションの開始タイミングを操作できます。
0sを指定すると即時に動き出し、1sを指定すると1秒後に動き出します。

.animation_element {
    animation-name: move;
    // 以下いずれか
    animation-delay: 2s; // アニメーションの最後の状態で停止する
}

CSSアニメーションをアニメーション途中から開始する方法

先ほどおさらいした”animation-delay”
こちらにマイナス値を入れることで、予めマイナス分アニメーションが進行した状態を初期値にすることが可能です。

mdn web docsのanimation-delayのページにも以下のように記載されています。

animation-delay は CSS のプロパティで、アニメーションをいつ開始するかを指定します。アニメーションは未来のある時点から、直ちに最初から、または直ちにアニメーション周期の途中から始めることができます。

animation-delay – mdn web docs
https://developer.mozilla.org/ja/docs/Web/CSS/animation-delay

以下のように記述します。

// アニメーションが10秒進行した状態からスタートする
animation-delay: -10.0s;

これがどういう時に役立つかですが、以下のサンプルを見てください。

See the Pen
Untitled by Uilou (@uilou754)
on CodePen.0

なめらかに動いていないでしょうか？
このように、左端に消えた要素が右端から出てくるなど、アニメーションの過程で座標が飛ぶ場合、アニメーション内でつなごうとするとどうしてもおかしくなってしまいます。

上記サンプルでは２つの要素を0%の状態と50%の状態から動き始めるようにしています。
これをアニメーションを2種類用意して、50%で左端から右端に一瞬で移動させようとすると、ちょっとずれちゃうんです。
なので、開始時間をマイナス指定することで、初期状態を変更してあげましょう。