iPentec.com  /  Doc  /  CSS

目次

CSSで縞模様(ストライプ)のアニメーションを表現する - CSS

CSSで縞模様(ストライプ)のアニメーションを表現するコードを紹介します。

シンプルなアニメーション

コード

StripeAnimation01.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="StripeAnimation01.css" />
</head>
<body>
  <div class="StripeFrame">
    Test
  </div>
</body>
</html>
StripeAnimation01.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(0deg, rgba(255,176,166,1) 0%, rgba(255,176,166,1) 25%, rgba(231,113,97,1) 25%, rgba(231,113,97,1) 25%,
    rgba(231,113,97,1) 50%, rgba(255,176,166,1) 50%, rgba(255,176,166,1) 75%, rgba(231,113,97,1) 75%, rgba(231,113,97,11) 100%);
  animation: stripe-animation 1s linear infinite;
}

@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0px 90px
  }
}

解説

CSSの縞模様の描画のロジックの詳細はこちらの記事で紹介しています。

ストライプのアニメーションはCSSのanimationプロパティで実装します。animationプロパティの動作についてはこちらの記事を参照してください。
キーフレームは、別途定義する stripe-animation を指定しています。また、アニメーション再生回数に infiniteを指定し、アニメーションが終了しない状態とします。
animation: stripe-animation 1s linear infinite;
キーフレームの設定は下記です。background-position プロパティでのアニメーションとします。100%の状態で縦方向に90ピクセル移動します。今回、縞模様を表示する枠の高さが height: 180px; で指定されているため180ピクセルあります。2つの縞を表現しているため、1回のアニメーションループで、高さの半分の距離 (180px / 2 = 90px) 移動すると、 アニメーションの継ぎ目がなく移動できることになります。
@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 0px 90px
  }
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ストライプの縞模様が縦方向にアニメーションします。


ストライプに角度がついた場合、background-size プロパティが指定された場合、

ストライプに角度がつき、background-size プロパティが指定され、ストライプの幅が調整された場合のアニメーションを紹介します。

コード

StripeAnimation02.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="StripeAnimation02.css" />
</head>
<body>
  <div class="StripeFrame">
    Test
  </div>
</body>
</html>
StripeAnimation02.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(-45deg, #c3ff9f 0%, #c3ff9f 25%, #73b749 25%, #73b749 25%, #73b749 50%, #c3ff9f 50%, #c3ff9f 75%, #73b749 75%, #73b749 100%);
  background-size: 32px 32px;
  animation: stripe-animation 1s linear infinite;
}

@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 32px
  }
}

解説

background-size: 32px 32px; の記述により、ストライプのパターンが32ピクセルの正方形に縮小され枠内に繰り返しで配置されます。
パターン1回分のスクロールを繰り返せばよいため、32ピクセルずつ移動すれば切れ目なくアニメーションを再生できます。
キーフレームには32ピクセル並行移動する設定を記述します。
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 32px
  }

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ストライプの縞模様がアニメーションします。


ストライプに角度がついた場合2

ストライプの角度が45度ではない場合は、角度を変更しただけではうまく動作しません。
StripeAnimation03.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="StripeAnimation02.css" />
</head>
<body>
  <div class="StripeFrame">
    Test
  </div>
</body>
</html>
StripeAnimation03.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(-60deg, #c3ff9f 0%, #c3ff9f 25%, #73b749 25%, #73b749 25%, #73b749 50%, #c3ff9f 50%, #c3ff9f 75%, #73b749 75%, #73b749 100%);
  background-size: 32px 32px;
  animation: stripe-animation 1s linear infinite;
}

@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 32px
  }
}

上記のコードをWebブラウザで表示すると、下図の結果となります。ストライプの模様がずれてしまっていることが確認できます。


回転がない場合や、回転が45度、90度の場合は回転した模様を正方形でトリミングしたものをタイリングしてもずれは起きませんので、background-size の値の 縦と横を同じサイズにしておけばズレは発生しません。



しかし、回転角が45度ではない場合には、正方形でトリミングすると、ずれが出てしまい、先のページの表示のようにストライプの継ぎ目でずれが出てしまいます。



ストライプ模様がずれないようにするためには、ストライプの角度に合わせて、background-sizeの値を変更し正方形でない形状にします。
形状は矩形の対角がストライプの境界線となるような矩形の縦横比のサイズとします。
ストライプの角度をθ、background-size の矩形の横を x 縦を y とすると、tan θ = y/x の関係が成り立ちます。




主要な角度の対応表は次の通りです。
ストライプの角度(θ)横縦補足
011.00 tan θ=∞ となるので計算式からは除外
1010.18
2010.36
22.510.41
3010.58
4511.00
6011.73
67.512.41
7513.73
8015.67
9011.00 tan θ=∞ となるので計算式からは除外

CSSファイルを以下のコードに書き換えます。
StripeAnimation03.css
.StripeFrame {
  width: 360px;
  height: 180px;
  background: linear-gradient(30deg, #e0bbff 0%, #e0bbff 25%, #a883e4 25%, #a883e4 25%, #a883e4 50%, #e0bbff 50%, #e0bbff 75%, #a883e4 75%, #a883e4 100%);
  background-size: 64px 37px;
  animation: stripe-animation 1s linear infinite;
}

@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 128px 37px
  }
}
background-size: 64px 37px; により、正方形でない矩形のタイルにします。
37pxの値は上記の表のθ=30度のあたいから 64px * 0.58 = 37.12 により計算できます。

修正したHTML、CSSファイルをWebブラウザで開きます。45度ではない指定した角度のストライプのアニメーションが再生できています。

補足:repeating-linear-gradient は利用できないのか？
静止しているストライプの場合は、repeating-linear-gradientを利用できますが、アニメーションの場合は、repeating-linear-gradient では継ぎ目が一致しない状態になります。
ストライプをアニメーションする場合は、実装がやや面倒ですが、background-position プロパティを利用して実装する必要があります。

実践的な実装例

複数の効果を組み合わせた実装例です。

コード

下記のCSS,HTMLファイルを作成します。
StripeAnimation-hands-on-01.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="StripeAnimation-hands-on-01.css" />
  <title></title>
  <script type="text/javascript">
    function MouseOver() {
      var elem = document.getElementById("Frame01");
      elem.classList.add("Animate");
    }
    function MouseLeave() {
      var elem = document.getElementById("Frame01");
      elem.classList.remove("Animate");
    }
  </script>
</head>
<body>
  <div id="Frame01" class="StripeFrame" onmouseover="MouseOver();" onmouseleave="MouseLeave();" >
    <img class="ImgFrame" src="char.png"/>
  </div>
</body>
</html>
StripeAnimation-hands-on-01.css
.StripeFrame {
  margin-top: 5rem;
  margin-left: 5rem;
  width: 160px;
  height: 240px;
  display: flex;
  background-color: #c3ff9f;
  align-content: flex-end;
  border-radius: 10%;

  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.StripeFrame.Animate {
  transform: rotate(-5deg) scale(1.05,1.05);
  background: linear-gradient(-45deg, #c3ff9f 0%, #c3ff9f 25%, #83de4b 25%, #83de4b 25%, #83de4b 50%, #c3ff9f 50%, #c3ff9f 75%, #83de4b 75%, #83de4b 100%);
  background-size: 32px 32px;
  animation: stripe-animation 1s linear infinite;
}

.ImgFrame {
  width: 100%;
}

@keyframes stripe-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 32px
  }
}

画像(char.png)は背景透過のPNGファイルを準備します。

解説

マウスポインタが枠内に入ると、Animate サブクラスを追加し、アニメーションを開始します。 マウスポインタが枠外に出ると、Animate サブクラスを削除しアニメーションを停止します。 また、transform プロパティを利用して、枠の拡大と回転を追加します。マウスポインタを枠に重ねると、枠が拡大し傾く効果をつけています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


マウスポインタを枠内に重ねると、背景がストライプのアニメーションに変わります。また、枠が傾き、大きさも少し大きくなります。


マウスポインタが枠外に出ると元の状態に戻ります。


著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2022-05-22
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.