純粋なCSS連続水平テキストスクロール

DigitaloceanアプリプラットフォームHackathonの一部として私の個人的なサイトを構築している間、私は私の技術を誇示する創造的な方法を考えなければなりませんでした.私はいくつかの動きが欲しかったが、何も複雑に.
思考とtinkeringの瞬間の後、私は最終的に連続した水平テキストスクロールを使用することを決めた、テレビニュースチャンネルのハイライトに表示されるもののようなソート.あなたは私の上のアクションでスクロールテキストを見ることができますwebsite . 私は2行のテキストを使いました.最初の行は私のスキルを示し、2行目は私がよく知っているソフトウェア、ツール、およびプログラミング言語を示しています.
このクールな部分は、HTMLとCSSだけを使って作成することができますtranslate プロパティ.JavaScriptコードは必要ありません.
完全なコードを見るJSFiddle . またはどのようにコードが動作を理解するために読み続ける.
開始するには、HTMLコードを書いてください.あなたが好むテキストを書くこと自由にdiv タグ:

  <div class="skills">
        Front end Web development • 3d design • Graphic design • Community management • Open source • Technical support • Technical Writing • Figma • Pricacy & cybersecurity • Search Engine Optimization • Logo design
      </div>
      <div class="langs">
        HTML5 • CSS3 • JavaScript • Markdown • npm • Inkscape • Gimp • Figma • Git & GitHub & GitLab • SVG • PHP • Python • Wordpress • Mailchimp
  </div>

次はCSSです.

.skills, .langs {
  text-transform:uppercase;
  font-size:4vw;
  display: inline-block;
  white-space: nowrap;
  animation: floatText 25s infinite linear;
  padding-left: 100%; /*Initial offset, which places the text off-screen*/
  color:#ada97d;
}

上から、最も重要な宣言はpadding-left: 100% , これはテキストをビューから出力します.
今、我々は画面上のテキストのスクロール運動をアニメーション化するための追加のコードが必要です.我々はanimation: floatText 25s infinite linear 宣言.floatText アニメーションキーフレームを呼び出します.アニメーションは25秒で動く.この値を編集することができますどのように高速または低速では、テキストを画面上を移動するに影響を与える.使用するinfinite テキストを継続的に移動するには.
今、我々はtranslate 書き込み中のプロパティfloatText キーフレーム

@keyframes floatText {
  to {
    transform: translateX(-100%);
  }
}

以前に思い出してください.私たちはテキストに最初のオフセットを与えましたpadding-left: 100% . 今、我々は右上のテキストをスクロールすることができますが、上記のコードを使用して、最初のオフセットに反対方向にその位置を変換します.
それです.お済みです.
まあ、かなり.あなたはもう1つのNifty機能を追加することを決定することができます-マウスカーソルのときにテキストの一時停止を確認します.このポーズは、画面をスクロールする前に、テキストを読む時間を与え、読者を遅くするのに役立つことができます.これを行うには、animation-play-state プロパティの値paused .

.skills:hover, .langs:hover  {
  animation-play-state: paused;
}

そこにあります.純粋なCSSで作られた連続的な水平ポーズ可能なテキスト・スクロール