CSS3で背景のストライプ画像をループアニメーションしてみる CSS3のキーフレームを使えばループアニメーションが簡単にできるようになります。 今回はbackgroundにストライプ画像を設定してループさせてみます。 投稿日2017年05月25日 更新日2017年05月25日 HTML HTMLは基本この形です。特別なことはないですね。 HTML <section class="section1"> <h2>SECTION 01</h2> </section> 横型ストライプ 横型のストライプはrepeating-linear-gradientを使うと簡単ですね。 アニメーションはkeyframesで設定します。 nfinite linearで無限にスクロールするようになります。 CSS @keyframes move-stripe1 { 0% { background-position-
![CSS3で背景のストライプ画像をループアニメーションしてみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b3cc9d2bc9ad3bd0488c0013aa7eed00a49c77b/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2017%2F05%2F0525s.png)