cssとjavascriptで軽度なアニメーションを実装してみよう！

# はじめに

こんにちは！GrowGroup株式会社の岩内と申します。
こちらの内容はcssとjavascriptを使って軽度なアニメーションを実装する内容となっており、
「アニメーションでどんなことができるのか」というイメージを掴んでいただくというのが今回の趣旨です。
ですのでエンジニア向けというより、ディレクター、デザイナー向けです。
後半で実際に手を動かします！

# 下準備
1. vscodeのダウンロード
URL:https://azure.microsoft.com/ja-jp/products/visual-studio-code/

2. ワークショップで使用するファイルのダウンロード
URL:https://40.gigafile.nu/0304-cdde4fed3c1c1f3dcf0df9c262c86023e

# 目次

1. アニメーションとは
2. css3アニメーション
3. javascriptでできること
4. 実際に手を動かしてみましょう！
5. アニメーションを見てみる（時間が余れば）

# 1.アニメーションとは

連続して変化する絵や物により発生する**仮現運動**を利用した**映像手法**です。
仮現運動は要約すると**パラパラ漫画**です。
つまり、アニメーションはパラパラ漫画といえます。

# 2.css3アニメーション

要素をアニメーションさせるCSSの機能で、**CSS Transition**と**CSS Animation**の2つの機能があります。

### 2-1.CSS Transitionとは
CSSプロパティが変化する際のアニメーションの**速度**を操作する手段を提供します。

```sample.css
.sample {
  transition: all 0.3s linear;
}

/* transitionは切り分けてもよし */
.sample {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
}
```

transitionプロパティは、「transition: **変化の対象** **変化の時間** **変化の仕方**」を指定します。
加えて、変化の終わりの状態となる「:hover」などの擬似クラスと組み合わせて利用するとアニメーションが発生します。
また、変化の仕方につきましては、**イージング関数**と呼ばれ、数種類用意されております。

https://easings.net/ja

### 2-2.CSS Animation
**キーフレームアニメーション**を適用できる機能で細かい動きのアニメーションを実装する時に利用します。
キーフレームアニメーションとはアニメーションの開始(0%)から終了(100%)までの任意の経過地点にプロパティを指定できるアニメーションのことです。(プロパティを指定した経過地点のことをキーフレームという)。

```sample.css
@keyframes test1 {
 0% {
   width: 100px;
   height: 100px;
 }
 100% {
   width: 300px;
   height: 250px;
 }
}

@keyframes test2 {
 from {
   width: 100px;
 }
 to {
   width: 300px;
 }
}

@keyframes test3 {
 0% {
   width: 100px;
 }
 50% {
   width: 500px;
 }
 100% {
   width: 300px;
 }
}

/* アニメーションの呼び出し方 */
.sample {
  animation: test1 5s ease 2s infinite alternate;
}

/* animationは切り分けてもよし */
.sample {
  animation-name: test1;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction:reverse;
}

/* 各プロパティの初期値
  animation-nameはnone
  animation-durationは0
  animation-timing-functionはease（開始と終了を滑らかにする、計8種類あり下記サイトを参照）
  https://cotodama.co/animation-property/#animation-timing-function
  animation-delayは0
  animation-iteration-countは1
  animation-directionはnormal */
```

animationプロパティは、「animation: **キーフレーム名** **アニメーションの時間** **アニメーションの進行度** **アニメーション開始時間** **アニメーションの繰り返し回数** **アニメーションの再生方向**」を指定します。
animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction の6つのプロパティの値を、組み合わせて指定することができます。 省略された値はそれらの初期の値に設定されます。

https://developer.mozilla.org/ja/docs/Web/CSS/animation-direction

http://ianlunn.github.io/Hover

# 3.javascriptでできること
・既に誰かが作ったもの（ライブラリという）を利用できる
https://vincentgarreau.com/particles.js/
https://owlcarousel2.github.io/OwlCarousel2/

・cssのプロパティを操作
・アニメーションのタイミングを操作

|メソッド（jqueryでの記法）|意味|
|:----|:---|
|.change()|フォームの値が変わったとき|
|.click()|クリックされたとき|
|.focus()|フォーカスされたとき|
|.blur()|フォーカスが外れたとき|
|.keyup()|マウスボタンが上げられたとき|
|.keydown()|マウスボタンが下げられたとき|
|.mouseenter()|要素にマウスが入ったとき|
|.mouseleave()|要素からマウスが出て行ったとき|
|.mouseover()|要素の中でマウスが動いたとき|
|.resize()|サイズが変わったとき|
|.scroll()|スクロールしたとき|
などなど

# 4.実際に手を動かしてみましょう！

冒頭でダウンロードしていただいた中にpracticeフォルダが1~4ございます。
●●の部分を書き換えてみましょう！


### practice1（Transitionを使用）
blue-boxクラスをhoverした際に、boxの色が青から赤に2秒間で変化するtransitionを設定してください。

https://gyazo.com/707a24a6f1cfdf5171ca167a8684a600

```practice1/practice.html
  <div class="blue-box"></div>
```

```practice1/practice.css
.blue-box {
    background-color: blue;
    width: 100px;
    height: 100px;
}

/* 2秒かけて変化 */
.blue-box:hover {
    background-color: red;
    transition: ●● ●● ●●;

    /* 余裕があればtransitionを3つに分けてみてください
    transition-●●: ●●;
    transition-●●: ●●;
    transition-●●: ●●; */
}
```

### practice2（keyframesを使用）

青い箱を4秒かけて一周させてみてください。

https://gyazo.com/a2a73781ea93649a8d30f2fd8c7d989a

```practice2/practice.html
  <div class="blue-box"></div>
```

```practice2/practice.css
.blue-box {
    background-color: blue;
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    animation: ●● ●s ●● ● ●●;
}

@keyframes ●● {

}
```

### practice3（javascriptとTransitionを使用）
画面外にいる青い箱が画面内に見えた時、背景色を赤色に変えてください。

https://gyazo.com/8883d1c2f70c2455f76f84b111a9ca4c

```practice3/practice.html
<div class="blue-box"></div>
```

```practice3/practice.js
$(function(){
    $(window).scroll(function(){
        let top = $(".blue-box").offset().top; // ターゲットの位置取得
        let position = top - $(window).height();  // ターゲットが上からスクロールしたときに見える位置
        let position_bottom = top + $(".blue-box").height();  // ターゲットが下からスクロールしたときに見える位置

        if($(window).scrollTop() > position && $(window).scrollTop() < position_bottom){
            // 要素が見えたときの動き 
            $(".blue-box").addClass("●●");
        }else{
            // それ以外の動き
            $(".blue-box").removeClass("●●");
        }
        })
})
```

```practice3/practice.css
.blue-box {
    background-color: blue;
    width: 100px;
    height: 100px;
    margin: 120vh 0 120vh;
    transition: all 0.8s linear;
}

/* app.jsで.blue-boxに追加するクラスのcssを書いてみましょう */
.●●{
    /* 背景をredに変えてください */
}
```
### practice4（keyframesを使用）
エンターアニメーションを実装してください。
※秒数などはよしなに実装してみてください。

https://gyazo.com/1d401492e2290b81e30a6165357463d3

```practice4/practice.html
  <div class="blue-background"></div>
  <div class="logo"><img src="logo.png"/></div>
```

```practice4/practice.css
.blue-background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: blue;
}

.logo {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 209px;
    height: 48px;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}
```

# 5.アニメーションを見てみる（時間が余れば）

・背景が遅れてくる（パララックスという手法）
https://jujutsukaisen.jp

・3Dアニメーション（three.js）
https://github.com/home


# おわりに

いかがでしょうか。アニメーションを取り入れるだけでサイトに躍動感がでたり、強弱をつけることができます。
効果的に見せたい場合は是非アニメーションを取り入れていきましょう！
最後までご清聴いただき、ありがとうございました！