[CSS3] 10分で背景を「変化するグラデーション」にする

# はじめに

WEBサイトの背景を「変化するグラデーション」にしたいなーと思って、検索したら[CSS Gradient Animator](http://www.gradient-animator.com/)というWEBサイトをみつけたので紹介させて下さい。むちゃくちゃ簡単です。

# 手順

1. 元のHTMLを用意する
2. CSS Gradient Animator で好みのグラデーションを作成する
3. CSSを読みこませる

いーじょう!

## 元のHTMLを用意する

グラデーションさせるHTMLを用意して下さい。私のはテスト用で以下の様な簡単なHTMLを用意しました(準備中ページを作っているところだった)

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>annp: under construction</title>
</head>
<body style="font-family: 'Helvetica', sans-serif;">
  <div class="wrapper" style="width:100%;">
    <div class="main" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 600px; height: 600px">
      <h1 style="width: 600px;margin:0 auto;">
        <img src="img/annp_logo.png" alt="annp logo" style="width: 600px;">
      </h1>
      <p style="width: 600px;margin:0 auto 20px auto;text-align:center;font-weight: bold;">
        UNDER CONSTRUCTION
      </p>
      <p style="width: 600px;margin:0 auto;text-align:left;">
        "annp" is a rock creators of the group.<br>
      </p>
      <p style="width: 600px;margin:10px auto 0 auto;text-align:left;">
        In the future, we will continue to create a variety of work . It can be a system , or a web site , or even a paper thing , you might thing .
        Important to us that it is that even if many " exciting " and " surprise " and " evolving " will continue to work . <br>
        Ima shibaraku mate.
      </p>
      <p style="width: 600px;margin:20px auto 0 auto;text-align:center;font-size:70%;">
        2015/12/20 2:06
      </p>
    </div>
  </div>
</body>
</html>
```

この内容はあまり関係ないので用意したもので大丈夫です。

## CSS Gradient Animator で好みのグラデーションを作成する

WEBサイトにアクセスしてグラデーションを作成します。
下記画像の「add colour+」を2色以上追加するといい感じに右側にコードが生成されます。

<img width="864" alt="1.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/20865/53c5c9db-762c-cc8f-a81e-7bb153abdf85.jpeg">

## CSSを読みこませる

自分用のコードが作成されたらそれをCSSとして読み込ませます。
生成されたコードをbodyに設定しました。

```gradation.css
body {background: linear-gradient(270deg, #ff78d9, #51acff);
background-size: 400% 400%;

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
```

先ほどのHTMLのtitleタグの下に下記タグを追加しました。

```
<link rel="stylesheet" type="text/css" href="css/bg-gradation.css">
```

以上で設定完了です。

# Before と AFTER

gifだと重かったので、画像ですみませんが、

これが素のHTMLで(before)、
<img width="1278" alt="3.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/20865/08598df1-3480-a923-d48c-1af940a97076.jpeg">

以下の三枚みたく背景が変化していきます(after)。
<img width="1279" alt="blue.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/20865/cc164d22-2c8a-5a2f-c007-089120f953d9.jpeg">

<img width="1279" alt="purple.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/20865/477ed8ce-8bc0-b0ae-b2d1-49d03c624f73.jpeg">

<img width="1279" alt="pink.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/20865/025b89ae-3fef-fa77-342c-26da6627952e.jpeg">

ものすごく簡単なのでおためしあれー。