バナーをビューポート内外に移動する（CSSのみ）

Question

無限のサイドスクロールバナーを作成しようとしています。私が自分の幅を知っていれば問題ありません動く。問題は私がしていないことです。アイデアは、長いテキスト、一連の画像などを受け入れて右から表示させ、すべてのコンテンツを左に移動し、すべてが見えなくなってから再び始めるようにするという考えです。

.sliding-banner要素がその要素を含むまで拡大することができればうまくいくはずですが、何らかの理由でそれを達成できません。私は何かを逃して、何がわからない！アー！

あなたはどう思いますか？

.sliding-banner { 
    white-space: nowrap; 
    animation: bannermove 30s linear infinite; 
} 

.sliding-banner > * { 
    display: inline-block; 
    float: none !important; 
} 

@keyframes bannermove { 
    0% { transform: translateX(100%); } 
    100% { transform: translateX(-100%); } 
} 

ありがとう：

は、ここではいくつかのCSSです！

編集：Red Mercuryの提案に従って、bannermoveの引用符を削除しました。

Answer 1

アニメーション名を引用符で囲まないでください。

@keyframes "bannermove" - >@keyframes bannermove

.sliding-banner { 
 
    white-space: nowrap; 
 
    animation: bannermove 10s linear infinite; 
 
} 
 

 
@keyframes bannermove { 
 
    0% { transform: translateX(100%); } 
 
    100% { transform: translateX(-100%); } 
 
}

<div class="sliding-banner"> 
 
    <img src="http://placekitten.com/200/300"/> 
 
    <img src="http://placekitten.com/200/300"/> 
 
    <img src="http://placekitten.com/200/300"/> 
 
<div/>