CSSで床屋の回るアレをlinear-gradientとanimationで実装する方法

#前置き
CSSのlinear-gradientとanimationを組み合わせてアレを再現しました。
![ynr0z-47i6f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/aaa69c6f-c740-62a2-c5ea-faed29fc902b.gif)
最近のCSSはすごいですね。

##デモとソースコード
[CSS-Barber](https://de-teiu.github.io/css-barber/)

[ソースコード(GitHub)](https://github.com/de-teiu/css-barber)

#解説

##linear-gradientについて
CSSのbackgroundプロパティには、linear-gradientという関数を指定できます。
引数に方向(または角度)、開始色、終了色等を指定することで、開始色から終了色までのグラデーションを表現します。

###とりあえず表示してみる
```css:例
.test {
    background: linear-gradient(0deg,red,blue);
}
```
すると背景色がこんな風になります。(角度に0degを指定した場合、下から上にグラデーションします)
<img width="99" alt="cp1.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/777a5c5b-1c77-9a48-6703-073224445298.jpeg">

角度を適当に指定すれば斜め方向のグラデーション表示も可能です。
<img width="99" alt="cp2.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/0ce965cc-4fe9-ae66-afeb-0b637e78ba55.jpeg">


また、単色で表示させたい領域の範囲を%で指定することで、グラデーションさせる範囲を狭くできます。
以下の例では、下部10%分を赤色単色、上部40%を青色単色とし、残った50%分の領域でグラデーションさせています。

```css:例
.test {
    background: linear-gradient(0deg,red 10%,blue 60%);
}
```

<img width="100" alt="cp3.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/87fca355-dea4-9377-4374-924fdf7d1234.jpeg">

つまり、単色で表示させたい領域の割合が100%になっていれば、グラデーションっぽい表示にはなりません。

```css:例
.test {
    background: linear-gradient(0deg,red 50%,blue 50%);
}
```

<img width="99" alt="cp4.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/4eed7a7f-6ad2-dcd4-a9d0-8880cb21dbce.jpeg">

###ストライプ(縞模様)を作ってみる

background-sizeで背景のサイズを指定します。

```css:例
.test {
    background: linear-gradient(0deg,red 50%,blue 50%);
    background-size: 100px 20px;
}
```
こうなります。
ちなみに、background-repeat: repeat; が効いている必要があります。(指定してなければデフォルトで効きます。)
<img width="99" alt="cp5.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/ff25cbf1-e195-cf3c-84d1-a419493e8377.jpeg">

また、linear-gradientには中間色を複数指定することも可能なので、こんな書き方もできます。
(下から25%分を白、25%～50%分を赤、50%～75%分を白、75%～100%分を青にします)

```css:例
.test {
    background: linear-gradient(0deg,
        white 25%, red 25%,
        red 50%, white 50%,
        white 75%, blue 75%,
        blue 100%, white 100%);
    background-size: 100px 100px;
}
```
<img width="99" alt="cp6.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/2b22106b-1500-5e0f-657b-f14ea84d918d.jpeg">

だんだん近づいてきました。

### 角度を変えてみる
適当に-30degとか指定してみましょう。

```css:例
.test {
    background: linear-gradient(-30deg,
        white 25%, red 25%,
        red 50%, white 50%,
        white 75%, blue 75%,
        blue 100%, white 100%);
    background-size: 100px 100px;
}
```

<img width="99" alt="cp7.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/03941789-9e5e-f862-d3bb-77a21c0868a5.jpeg">

画像がキレイにつながってくれません。Chromeのデベロッパーツールか何かを使って、background-sizeを適当に微調整しましょう。

```css:例
.test {
    background: linear-gradient(-30deg,
        white 25%, red 25%,
        red 50%, white 50%,
        white 75%, blue 75%,
        blue 100%, white 100%);
    background-size: 173px 100px;
}
```

<img width="100" alt="cp8.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/56c5a88d-4884-5585-43c8-962dbf4717c5.jpeg">

何か惜しいですね。赤色と青色の線が変な混ざり方をしているため、中間色を更に細かく指定していきます。

```css:例
.test {
    background: linear-gradient(-30deg,
        white 12.5%, red 12.5%,
        red 25%, white 25%,
        white 37.5%, blue 37.5%,
        blue 50%, white 50%,
        white 62.5%, red 62.5%,
        red 75%, white 75%,
        white 87.5%, blue 87.5%,
        blue 100%, white 100%);
    background-size: 173px 100px;
}
```

<img width="99" alt="cp9.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/bccc81e4-cc46-351d-98fc-e5019679cd6c.jpeg">

とりあえず模様は完成ですね。
線の幅を調整したい場合、またbackground-sizeを調整すればできます。
(デモページでは線を太くするためbackground-size: 346px 200px;としています。)

##animationについて
＠keyframesでアニメーションを定義し、それを適用させたい要素にanimationプロパティで指定すると、CSSによるアニメーションが実現できます。
今回の場合は、background-positionを変更する(上方向にずらす)処理を定義しておきます。

```css:例
@keyframes barber-anime {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -200px;
    }
}
```

後は先程の背景を設定したクラスにanimationを追加します。

```css:例
.test {
    background: linear-gradient(-30deg,
        white 12.5%, red 12.5%,
        red 25%, white 25%,
        white 37.5%, blue 37.5%,
        blue 50%, white 50%,
        white 62.5%, red 62.5%,
        red 75%, white 75%,
        white 87.5%, blue 87.5%,
        blue 100%, white 100%);
    background-size: 173px 100px;
    animation: barber-anime 1000ms linear infinite;
}
```

これで完成です。
![0zb46-wncss.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/3d174a96-bdcb-4786-abae-73c325c122b2.gif)

#余談
後から知ったのですが、repeating-linear-gradient関数でもストライプが実現できるようです。


#参考
[斜めのストライプをCSSのみでデザインする方法｜コトダマウェブ](https://cotodama.co/css_striped-pattern/)
[【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8)