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

CSS animation day22 となりました。

本日は、カーテンが開くようなEffect についてです。



#1. 完成版
![ダウンロード (51).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/fe9a19e3-da75-579f-4041-f69fe1a3fcb6.gif)


#2. なぜか？
毎日CSS animation のネタを探しており、その中でみたことがないeffect を発見しました。
SPA で使えば、面白いユーザー体験となると思ってます。

一般的に、画面のX軸、Y軸のみのアニメーションだけではなく、奥域を感じるZ軸へのアニメーションは、3D の印象を醸し出すことができ、大変おもしろいです。先日の[StarWars](https://qiita.com/duka/items/c971ca0749a8bcb5c617) では、rotateXを用い奥域を表現しましたが、この分野に関しては、今後も研究していきます。


#3. 参考文献
[CSS Tricks](https://css-tricks.com/creating-css-sliding-door-effect/)

#4. 分解してみる

❶. 

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

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

.curtain {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.curtain-wrapper {
  width: 100%;
  height: 100%;
}

.curtain-panel {
  background: rgb(107, 76, 129);
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
  z-index: 2;
}

.curtain-center {
  background: rgb(121,223,158);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
```
<img width="870" alt="スクリーンショット 2019-02-12 14.24.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/e92397fd-5f5b-2b05-6ac7-30bba18714b7.png">


カーテンができました。裏にもう一枚、画面が隠れてます。
css でoverflow: hiddenとすることで、カーテンが開いたときに画面枠からはみ出た部分を、非表示にしてます。
<br/>
❷. 
クリックすると、カーテンが左右に動くというアニメーションをつけます。
Javascript なしで、pure CSSでやるにはどうしたら良いでしょうか？

[前回の記事](https://qiita.com/duka/items/ebe90fc119a5b2c2c7d7) のスキルを使いましょう！

```index.html

  <body>
    <div class="curtain">
      <div class="curtain-wrapper">
        <div class="curtain-center"></div>

        <input type="checkbox" id="start" />
        <label for="start">
          <div class="curtain-panel curtain-left"></div>
          <div class="curtain-panel curtain-right"></div>
        </label>
      </div>
    </div>
  </body>
```


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

.curtain {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.curtain-wrapper {
  width: 100%;
  height: 100%;
}

.curtain-panel {
  background: rgb(107, 76, 129);
  position: relative;
  width: 50%;
  height: 100vh;
  float: left;
  z-index: 2;
  transition-timing-function: ease-out;
  transition-duration: 1s;
}

.curtain-center {
  background: rgb(121, 223, 158);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#start {
  display: none;
}

#start:checked + label .curtain-right {
  transform: translateX(100%);
}

#start:checked + label .curtain-left {
  transform: translateX(-100%);
}
```
![ダウンロード (50).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/f1ea5848-28f6-ba2b-d47b-e284842648ef.gif)


できました！
ただし、これだと開きはするのですが、閉じません。
背景をクリックして、カーテンを閉じれるようにしましょう。

```index.html
<body>
    <div class="curtain">
      <div class="curtain-wrapper">

        <input type="checkbox" id="start" />
        <label for="start">
          <div class="curtain-panel curtain-left"></div>
          <div class="curtain-panel curtain-right"></div>
          <div class="curtain-center"></div>
        </label>
      </div>
    </div>
  </body>
```

```styles.css

#start:checked + label .curtain-right {
  transform: translateX(100%);
}

#start:checked + label .curtain-left {
  transform: translateX(-100%);
}

#start + label .curtain-right {
  transform: translateX(0);
}

#start + label .curtain-left {
  transform: translateX(0);
}
```

![ダウンロード (51).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/5c65cea8-a5c3-05c9-436b-502b2e8d22ae.gif)


何をしたかというと、checkbox がチェックされているときは、動く。チェックされていないdefault の時は、translateX(0) で定位置に戻るという、アニメーションをつけております。


本日は以上です！
また明日〜