CSS animation で遊び倒す　- しずく  Gooey Effect-


CSS animation day13 となりました。


本日は、水滴のような表現 ([Gooey Effect](https://css-tricks.com/gooey-effect/))についてです。


#1. 完成版
![ダウンロード (30).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/a848ec8a-624a-153f-2f71-894304c0f23d.gif)

<p class="codepen" data-height="407" data-theme-id="0" data-default-tab="css,result" data-user="hiroyaiizuka" data-slug-hash="MLmojW" style="height: 407px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Gooey Effect">
  <span>See the Pen <a href="https://codepen.io/hiroyaiizuka/pen/MLmojW/">
  Gooey Effect</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. Gooey Effect　とは？
スライムのような水銀のようなものがヌメッと動くような表現です。
表現の仕方については、ポイントが3つあります。

<br/>
1  背景に Blur をかけて、境界をぼやけさせる

<img width="662" alt="スクリーンショット 2019-02-02 15.08.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/0956eb15-64e1-eca4-28a2-f759c2e51a52.png">


2  contrast をつけて、そのぼやけた輪郭のコントラストをつける



<img width="561" alt="スクリーンショット 2019-02-02 15.08.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/7aba1464-6a3f-9954-9cca-2538c0e77e4e.png">


何が起きたかというと、


背景の境界が強制的にぼやけてしまう所に放り込まれた円たちは、なされるがままに、その輪郭はぼやけてしまいます。しかし、ここでコントラストという救世主によって、円の輪郭は明瞭化し白黒はっきりなりますが、境界が曖昧だったところまで、ついでにはっきりしちゃった感じです。


[こちら](https://theorthodoxworks.com/study/css-filter-gooey-effect-and-svg/) のブログによると、CSS では背景を一色に限定しなければならなく、SVG アニメーションの方が、汎用性があって、おすすめとのことでした。

#3. 参考文献
[Engineer Blog](https://dev.oro.com/posts/2017/11/design/liquid_css/)
[CSS Tricks](https://css-tricks.com/gooey-effect/)
[UNORTHODOX WORKBOOK](https://theorthodoxworks.com/study/css-filter-gooey-effect-and-svg/)
 
#4. 分解してみる

❶. 
それでは、やっていきましょう。

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

```styles.css

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
  display: flex;
}

.gooey {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  filter: blur(10px) contrast(5);
  background: blue;
}
```

下準備ですが、
display: flex で水平方向に並列に並べます。
alignItems: centerで上下中央に、justify-content: center で左右中央にします。flexboxについて、詳細は [こちら](https://mamewaza.com/support/blog/howto-use-flex.html) をご参照ください。

<img width="816" alt="スクリーンショット 2019-02-02 17.47.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/d0b5afd2-d2fc-1245-d05f-d823ebe46bbd.png">



そして、背景にgooey effect のための設定をします。
blur と contrastをつけました。
<br/>
❷. 
では、丸を2つ作りましょう。

```styles.css
.circle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  margin: auto;
  background: #fff;
  border-radius: 50%;
}

.circle:first-child {
  right: 50%;
}

.circle:nth-child(2) {
  left: 50%;
}
```

<img width="683" alt="スクリーンショット 2019-02-02 17.15.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/61f79dcf-d17f-9d1e-569b-8f58de0e2e54.png">

いい感じで、繋がってますね。
最後にHover で動きをつけます。
<br/>
❸.

```styles.css

.circle:first-child:hover {
  animation: move 1s ease;
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  10% {
    transform: translateX(50px);
  }
  30% {
    transform: translate(20px, -80px) scale(1.3, 1.3);
  }
  50% {
    transform: translate(20px, 50px);
  }
  60% {
    transform: translate(20px, 0px);
  }
  80% {
    transform: translate(-20px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
```

![ダウンロード (30).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/6cd7ad06-d1bb-5474-0d16-4083d71176b3.gif)



なお、animation-timing function では、アニメーションの開始と終了が滑らかになる、ease がかなり相性が良いと感じました。



明日は、このGooey Effect を応用して、涙を作ります。
ではまた！