CSS animation で遊び倒す - Skew image animation-

CSS animation day29 となりました。

[前回](https://qiita.com/duka/items/3484bfffc77c6780a844) の作品では、border を使って、skewを表現しました。
本日は、もうちょっと表現力を上げていこうと思います。



#1. 完成版

![ezgif.com-optimize (6).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/96ada83e-0a30-46e3-f46a-b54d7e2d8ac8.gif)

<p class="codepen" data-height="474" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="BMMMoP" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Sunset  skew animation">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/BMMMoP/">
  Sunset  skew animation</a> by hiroya iizuka (<a href="https://codepen.io/hiroyaiizuka">@hiroyaiizuka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#2. 参考文献
[Animated Skewed Pane](https://medium.com/coding-design/animated-skewed-panes-d4443a2c49cf)
[collis](https://coliss.com/articles/build-websites/operation/css/css-property-backdrop-filter.html)

#3. 分解してみる

❶. 

マークアップしましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
      <div class="skew_image">
        <div></div>
      </div>
  </body>
</html>
```


```styles.css
body {
  padding: 0;
  margin: 0;
}

.skew_image {
  width: 100vw;
  height: 100vh;
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  position: relative;
}
```

![sunset.png](https://qiita-image-store.s3.amazonaws.com/0/232715/8a98e2df-1ad6-17e1-05d0-abc4299d681c.png)


綺麗ですね。

❷.
次に、skew_image を設定していきます。

```styles.css

.skew_image {
  width: 100vw;
  height: 100vh;
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  position: relative;
}

.skew_image > div {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 500px;
  width: 200px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  transform: translate3d(0, 0, 0) skew(15deg, 0);
}
```
<img width="1069" alt="スクリーンショット 2019-02-19 14.35.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/2b462678-9eba-db81-5955-7cb603a00a5e.png">


いい感じです。
もう一つ、skew の画像を作り、filter などを駆使して表現を出しましょう。

```index.html
 <body>
    <div class="skew_image">
      <div class="skew"></div>
      <div class="skew2"></div>
    </div>
  </body>
```

```styles.css

.skew {
  position: absolute;
  top: 0;
  left: 450px;
  width: 800px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  transform: translate3d(0, 0, 0) skew(35deg, 0);
}

.skew2 {
  position: absolute;
  top: 0;
  left: 150px;
  width: 200px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  transform: translate3d(0, 0, 0) skew(-15deg, 0);
}
```

<img width="1074" alt="スクリーンショット 2019-02-19 15.04.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/0208263e-08d9-1b44-bfb3-da3b9a6b7e11.png">

いい感じですね。

❸.
もうちょっとこだわっていきます。

今回のskew image は、ただ単に、薄い透明の色を上のりしただけですが、同じ背景画像をrendering して、ここにfilter やアニメーションをつけてみましょう。

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="skew_image">
      <div class="skew"></div>
    </div>
  </body>
</html>
```

```styles.css

.skew {
  position: absolute;
  top: 0;
  left: 530px;
}

.skew:before {
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  content: "";
  display: block;
  position: relative;
  width: 200px;
  height: 100vh;
  transform: translate3d(0, 0, 0) skew(-15deg, 0);
}
```

<img width="1070" alt="スクリーンショット 2019-02-19 16.14.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/4fa382fe-19c2-0936-81b1-03417dc37914.png">

不思議な感じですね。
ガラスのような一部切り取られたような表現ができます。

❹. 
では、ここからがアニメーションです。
まずは、下の失敗作のGIF画像をご覧ください。

![ダウンロード (13).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/81f716d8-eda0-2367-477e-c07dfe9ce388.gif)


切り取られた平行四辺形が移動するのに、中の画像は変わってません。この問題を解決するには、どうしたら良いでしょうか？
そういう時は、課題を切り分けてみましょう。アニメーションは、以下の2つに分類されます！　

1. 平行四辺形が横に移動するアニメーション
2. 背景画像が、横に移動するアニメーション　

1,2 の移動速度が同じであれば、この問題を解決できそうです。早速、1. から取り組んでいきましょう。

```styles.css
body {
  padding: 0;
  margin: 0;
}

.skew_image {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  position: relative;
}

.skew {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  overflow: hidden;
  background: slategrey;
  animation: skewShift1 15s infinite;
}

@keyframes skewShift1 {
  0% {
    transform: translate3d(0, 0, 0) skew(15deg, 0);
  }
  50% {
    transform: translate3d(800px, 0, 0) skew(15deg, 0);

    width: 400px;
  }
  100% {
    transform: translate3d(0, 0, 0) skew(15deg, 0);
  }
}
```

![ezgif.com-optimize (2).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f8d7f3d9-5a0e-5d72-b91b-0eacc5c0fb42.gif)

いい感じです。
___
では、次に平行四辺形の中の画像を移動させましょう。
擬似要素のbefore クラスがぴったりです！　

```styles.css

.skew:before {
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  content: "";
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  animation: skewBgShift1 15s infinite;
}

@keyframes skewBgShift1 {
  0% {
    transform: translate3d(0, 0, 0) skew(-15deg, 0);
  }
  50% {
    transform: translate3d(-800px, 0, 0) skew(-15deg, 0);
  }
  100% {
    transform: translate3d(0, 0, 0) skew(-15deg, 0);
  }
}
```
![ezgif.com-optimize (4).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/a1a22bb1-9d43-9457-686d-983f51ba41e2.gif)

できました！

ここで、注意点は以下の2つです。
1: img はインライン要素なので、画像のheightやwidthを指定する時に、`display: block` を忘れないようにしましょう。
2: 画像は平行四辺形と`逆のX 軸方向`に動かしましょう。
<br/>
なお、上のGIF画像のように、ぴったりサイズ合わせるのではなく、ブラーを外しあえて少し位置をずらすことで、光の屈折のような感じを与え、ガラスのようなデザインを作ることができます。
`scale` を大きくして、ちょっと背景の位置をずらしましょう。

```styles.scss
@keyframes skewBgShift1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1.2) skew(-15deg, 0);
  }
  50% {
    transform: translate3d(-800px, 0, 0) scale(1.2) skew(-15deg, 0);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.2) 
      skew(-15deg, 0);
  }
}
```
![ezgif.com-optimize (3).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/6d6a6c3b-ae1a-ae84-8226-31b0ac4b8137.gif)

Great ですね！

❺.
2つ作り、組み合わせ完成です。一気にやりましょう！

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="skew_image">
      <div class="skew"></div>
      <div class="skew2"></div>
    </div>
  </body>
</html>

```

```styles.css

.skew {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  width: 200px;
  animation: skewShift1 10s infinite;
}

.skew2 {
  position: absolute;
  top: 0;
  left: 600;
  bottom: 0;
  overflow: hidden;
  width: 200px;
  animation: skewShift2 15s infinite;
}

.skew:before {
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  content: "";
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  animation: skewBgShift1 10s infinite;
}

.skew2:before {
  background-image: url("../img/sunset.png");
  background-position: center center;
  background-size: cover;
  content: "";
  display: block;
  position: relative;
  width: 100vw;
  height: 100vh;
  animation: skewBgShift2 15s infinite;
  filter: grayscale(100%) blur(10px);
}

@keyframes skewShift1 {
  0% {
    transform: translate3d(0, 0, 0) skew(15deg, 0);
  }
  50% {
    transform: translate3d(800px, 0, 0) skew(15deg, 0);

    width: 400px;
  }
  100% {
    transform: translate3d(0, 0, 0) skew(15deg, 0);
  }
}

@keyframes skewShift2 {
  0% {
    transform: translate3d(800px, 0, 0) skew(-10deg, 0);
  }
  50% {
    transform: translate3d(0px, 0, 0) skew(-10deg, 0);
  }
  100% {
    transform: translate3d(800px, 0, 0) skew(-10deg, 0);
  }
}

@keyframes skewBgShift1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1.2) skew(-15deg, 0);
  }
  50% {
    transform: translate3d(-800px, 0, 0) scale(1.2) skew(-15deg, 0);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.2) skew(-15deg, 0);
  }
}

@keyframes skewBgShift2 {
  0% {
    transform: translate3d(-800px, 0, 0) scale(1.2) skew(-10deg, 0);
  }
  50% {
    transform: translate3d(0px, 0, 0) scale(1.2) skew(-10deg, 0);
  }
  100% {
    transform: translate3d(-800px, 0, 0) scale(1.2) skew(-10deg, 0);
  }
}
```

![ezgif.com-optimize (6).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/deebe589-f99d-76be-6ce3-30990e12b5ca.gif)


できました！

skew と、blur で、こんなに面白いアニメーションになるんですね。それでは、また明日〜