CSS animation で遊び倒す - Curtain Opening Effect 2-


CSS animation day23 となりました。

昨日のカーテンの出来に納得がいかなかったため、別のアニメーションで表現します。


#1. 完成版

![ダウンロード (58).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/c79c1370-b9f0-120e-22a5-a47cc2c6dc1d.gif)
<p class="codepen" data-height="463" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="YBjPdo" style="height: 463px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Curtain Open">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/YBjPdo/">
  Curtain Open</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. 参考文献
[CSS Curtain Effects](https://codepen.io/musgrove/pen/gbXxGm?editors=1100)

#3. 分解してみる

❶. 
まず、スクリーンの枠を作ります。

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


```styles.css
body {
  margin: 0px;
  padding: 0px;
  background: #fff;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.theatre {
  border: inset #000 10px;
  margin: 50vh auto;
  transform: translateY(-50%);
  height: 300px;
  width: 80%;
}
```
<img width="1069" alt="スクリーンショット 2019-02-13 9.50.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/aa712f7a-1e34-db76-f35c-aa9d764c0256.png">


❷.
カーテンを入れる

```styles.css
.theatre {
  border: inset #000 10px;
  margin: 50vh auto;
  transform: translateY(-50%);
  height: 300px;
  width: 80%;
  position: relative;
  overflow: hidden;
}

.curtain-left,
.curtain-right {
  position: absolute;
  top: -30px;
  bottom: -30px;
  width: 61%;
  background-color: rgb(255, 0, 10);
}
```
<img width="1068" alt="スクリーンショット 2019-02-13 10.03.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/5f8874de-0097-2c03-fb4c-5c31407fd5fe.png">

なお、theatre にoverflow: hidden をつけることで、赤いカーテン(仮)が枠を超えずに、黒いborder内におさまります。
<br/>
❸.
カーテンを左右別に配置する。

```styles.css
.curtain-left {
  left: -10%;
}

.curtain-right {
  right: -10%;
}
```
<img width="1089" alt="スクリーンショット 2019-02-13 10.09.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/517c1827-1b57-17ce-d074-688442b55e54.png">

ぴったりおさまりました。
続いて、カーテンの模様を、[linear-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient) プロパティで、表現します。

```styles.css

.curtain-left,
.curtain-right {
  position: absolute;
  top: -30px;
  bottom: -30px;
  width: 61%;
  background-color: rgb(255, 0, 10);
  background-image: linear-gradient(
    90deg,
    rgba(204, 0, 10, 1) 30%,
    transparent 50%,
    rgba(204, 0, 10, 1) 80%,
    transparent 100%
  );
  background-size: 90px;
}
```
<img width="1042" alt="スクリーンショット 2019-02-13 10.37.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/6c6262ab-2318-3a08-8f93-2f8be266d2a2.png">

linear-gradient: 90deg でグラデーションを縦線にし、濃い目の赤で影を表現しております。この辺は、自由にデザインできるところでしょう。

グラデーションの指定サイズを決めるために、background-sizeを使用しております。詳しくは [こちら](http://unformedbuilding.com/articles/css-gradient-in-background/) にわかりやすくのっております。
<br/>
❹.
では、hover してアニメーションを発動させましょう。

```styles.css
.theatre:hover .curtain-left {
  transform: translateX(-100%);
  transition: all 3s ease;
}

.theatre:hover .curtain-right {
  transform: translateX(100%);
  transition: all 3s ease;
}
```

![ダウンロード (52).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/00d7d756-6b38-9881-d848-4129a96d4ab0.gif)

昨日と全く同じアニメーションをつけましたが、なんかまだ物足りません。左のカーテンに、rotate をつけてみましょう。

![ダウンロード (53).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/46aed492-7cf3-eb4d-4d04-a76f1dd8e7f8.gif)

少しいい感じになりました。
カーテンのtop が足りないたので、-300px にします。

```styles.css
.curtain-left,
.curtain-right {
  position: absolute;
  top: -300px;
  bottom: -30px;
```

そして、アニメーションがbottom を中心に動くようにします。
わかりづらいですが、左が修正後、右が修正前です。

```styles.css
.theatre:hover .curtain-left {
  transform: translateX(-100%) rotate(15deg);
  transition: all 3s ease;
  transform-origin: 50% bottom;
}

.theatre:hover .curtain-right {
  transform: translateX(100%) rotate(-15deg);
  transition: all 3s ease;
}
```

![ダウンロード (54).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/02ca8d7d-9c87-670e-9aa9-5ba0973f1eb9.gif)

いい感じです！
ただ、まだ、カーテンの内側の動きが硬いですね。
ここは、filter でshadow をつけてみます。
左が修正後、右が修正前です。

```styles.css
.curtain-left {
  left: -10%;
  filter: drop-shadow(1px 6px 6px black);
}

.curtain-right {
  right: -10%;
}
```

![ダウンロード (55).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/46a92d89-0f55-5c88-069f-c609ef83a712.gif)

いいですね！
そろそろ仕上げます。劇場のカーテンをイメージし、box-shadow inset で、カーテン全体に影をつけましょう。

```styles.css
.curtain-left {
  left: -10%;
  filter: drop-shadow(1px 6px 6px black);
  box-shadow: -2px 0px 6px rgba(255, 255, 255, 0.4) inset,
    0px 320px 40px rgba(0, 0, 0, 0.5) inset;
}

.curtain-right {
  right: -10%;
  filter: drop-shadow(1px 6px 6px black);
  box-shadow: 2px 0px 6px rgba(255, 255, 255, 0.4) inset,
    -0px 320px 40px rgba(0, 0, 0, 0.5) inset;
}
```

![ダウンロード (58).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/e358f538-54ae-724f-2bde-f4bc11bf1dd8.gif)


完成しました！
昨日よりはいい出来になりましたが、もっと丸まったアニメーションを取り入れたりまだまだ改良の余地はありそうです。

それでは、また明日！