CSSでグラデーションアニメーションを超簡単に作れるWebサービス

CSSだけで背景に動くグラデーションのアニメーションを付けたい時に、超簡単に作れるサイト「CSS Gradient Animator」と使い方をご紹介します。

「CSS Gradient Animator」は、少しずつ色が変わるグラデーション背景をCSSで作成できる無料のWebサービスです。
CSSにコピペするだけでWebサイトに実装できます。

とても便利なので、Webデザインにおすすめのツールです。

1 CSS Gradient Animator とは
2 CSS Gradient Animator の使い方
3 CSSにコピペするだけでOK
4 おわりに

CSS Gradient Animator とは

CSS Gradient Animator

Webサイトにアクセスすると、すぐに設定を始めることができます。
会員登録不要で無料です。

まず「Add colour +」で2色以上の色を設定します。
「Preview」ボタンで背景が変わるので、実際のグラデーションアニメーションをすぐに確認できます。

複数の色設定、角度、位置、アニメーションスピードも調整できます。

CSS Gradient Animator の使い方

まずは「Add colour +」で2色以上の色を選択

「Add colour +」ボタンをクリックして、2色以上の色を選択します。
複数の色が設定できます。

設定した色の変更、削除もできます。

AnimationName を変更

「AnimationName」の部分を、一番上のテキストボックスで好きな名前に変更できます。

ベンダープレフィックスの設定

「WebKit」「Gecko」「Opera」のベンダープレフィックスを追加するかを選択できます。

「WebKit」-webkit-
Google Chrome、Safari

「Gecko」-moz-
Mozilla Firefox

「Opera」-o-
Opera

ベンダープレフィックスとは
Google Chrome や Firefox、Opera などWebブラウザのベンダーがCSS3の拡張機能を実装するのに使用する識別子のことです。
CSS3の仕様を先行して実装するときに利用します。

最近のWebブラウザは多くのCSS3の仕様をサポートしているので、ベンダープレフィックスなして正しく動作するプロパティが増えてきました。

グラデーションの角度、位置、スピードを設定

各項目を変更すると、右側の数値がリアルタイムで変わります。

「Gradient Angle」角度
「Scroll Angle」位置
「Speed」アニメーションスピード(時間)

「Preview」ボタンで色とアニメーション確認

「Preview」ボタンを押すとサイトの背景が変わります。
実際のグラデーションアニメーション、色、スピードなどをすぐに確認できます。

CSSにコピペするだけでOK

右側に生成されたプロパティをCSSファイルにコピーペーストします。
任意のクラスの他、<body>、<header> などにも設定できます。

数値は自分で変更しても大丈夫です。

background ～animation: … ; まで
実装したいクラス、タグのプロパティに追加します。

@で始まる keyframes の記述
そのままCSSにコピペします。

CSSファイルの記述例

.[任意のクラス名] {
background: linear-gradient(270deg, #b48f47, #bf8bd1, #69cbc1, #bf8bd1, #b48f47);
background-size: 1000% 1000%;

-webkit-animation: background 30s ease infinite;
-moz-animation: background 30s ease infinite;
-o-animation: background 30s ease infinite;
animation: background 30s ease infinite;
}

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