過去記事「Sassでパターン背景をスクロールさせるループアニメーションを実装する」では繰り返しの背景画像を使ったループアニメーションの実装サンプルを紹介しましたが、今回はテキストを流すようなループアニメーションを実装していきたいと思います。   今回のアニメーションですが、電光掲示板にあるような左右一方向にテキストが流れていくような動きになります。現在は廃止されていますが「marqueeタグ」を使ったような効果を得ることができます。ここではmarqueeタグの代わりにCSS3のアニメーションを使って動かしています。   まずはHTMLから見ていきます。ここでは複数のテキスト要素を使う場合にわかりやすくするためリストの形を採用しています。 【HTML】※一部抜粋

<div class="marquee-wrap">
  <ul class="marquee-list">
    <li class="marquee-item">テキスト1 テキスト1 テキスト1 テキスト1
    </li>
    <li class="marquee-item">テキスト2 テキスト2 テキスト2 テキスト2
    </li>
    <li class="marquee-item">テキスト3 テキスト3 テキスト3 テキスト3
    </li>
    <li class="marquee-item">テキスト4 テキスト4 テキスト4 テキスト4
   </li>
  </ul>
</div>

  次にCSSで見た目とアニメーションを実装していきます。今回はSass（SCSS）で記述しています。CSSでも問題ないですが、CSSで書くよりわかりやすいので、調整する時なども便利なのではないでしょうか。 【CSS（SCSS）】

@keyframes animation-marquee {
  0% { 
    transform: translate(0%); 
  }
  100% { 
    transform: translate(-100%); 
  }
}
@mixin marquee {
  animation-name: animation-marquee;
  animation-duration: 50s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}
.marquee-wrap {
  background: #232323;
  padding: 0 5px;
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  position: relative;
    .marquee-list {
      white-space: nowrap;
      position: absolute;
      @include marquee;
        .marquee-item {
          display: inline;
          white-space: nowrap;
          font-weight: bold;
          font-size: 1.4em;
          color: #68EF41;
          padding: 0 60px 0 0;
            &:first-child {
              padding: 0 60px 0 100vw;
            }
        }
    }
}

  まずはアニメーションのキーフレームを設定します。transformプロパティで0％から100％まで移動させるようにします。次にmixinでアニメーションの設定をまとめておきます。animation-durationプロパティでテキストの動きを調整できます。イージングはlinearを指定することで、一定に動くのでそれっぽく見せることができます。必要に応じてベンダープレフィックスもつけておきましょう（参考記事：CSSのベンダープレフィックスを再確認してみる）   また、テキスト部分ですがinline要素にした後、white-spaceプロパティをnowrapにすることで横一行に並びます。その時にリストの最後の要素だけ、画面の横幅分の余白を左側につけておくことでループがスムーズにつながります。   これだけで、テキストを流すループアニメーションが実装できました。今回のサンプルはこちらにあげています。  

See the Pen ebrEoR by designsupply (@designsupply) on CodePen.

  お知らせの抜粋を掲載するときなどは、少ないスペースで表示できるのと、アニメーションがついているので見た目のインパクトを与えられるのではないでしょうか。   （参考にさせて頂いたサイト） 【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。