CSSアニメーションを直観的に設定できるジェネレーター「CSS3 Keyframes Animation Generator」の使い方を解説
競合ポータルサイトと差をつけるために何か工夫したいと思ったときにアニメーションを使用しようと考えられる方が多いと思いますが、技術が足りなかったり、サイトの表示速度が気になったりと二の肢を踏むケースも多いかと思います。
今回は使い方さえわかれば誰でも簡単にアニメーションを設定できるジェネレーター
「CSS3 Keyframes Animation Generator」の使い方を解説します。
CSS3 Keyframes Animation Generatorとは
CSS3 Keyframes Animation GeneratorはCSSアニメーションのオンラインツールです。
ドラッグ＆ドロップで直観的にアニメーションを制作することが可能で、リアルタイムでCSSコードが出力されます。
海外のサイトなので英語ではありますが、ポイントをおさえれば簡単に利用できると思います。
◯CSS3 Keyframes Animation Generator
http://cssanimate.com/
アニメーション機能を知ろう
①Timeline
アニメーションを設定するメインの機能です。
ここをクリックした後に青いボックスを動かしたい位置に移動させます。
②Code
完成したアニメーションのCSSコードが出力されます。
このコードをコピーし、HTML&CSSで設定を行うとサイト上でアニメーションとして表示されます。
「Class name」と「Animation name」はこのジェネレーターで2つ以上のアニメーションを作成する場合にそれぞれ設定しましょう。
③Animation properties
一番困惑するのがこの欄かと思いますが、意味さえ分かればなんてことはありません。
ここで大事なのは「Duration」と「Repeat」です。Durationはアニメーションの時間、Repeatはアニメーションのリピート回数です。
「Infinite repeat」にチェックを入れると永遠にリピートされるアニメーションが出来上がります。
「Keep state after animation」はアニメーションが終わった段階の状態を持続させるかどうかの設定です。
④Frame properties
こちらはドラッグ＆ドロップよりも正確にアニメーションを作りたい場合に利用すると良いのですが、「opacity」だけは覚えておいてください。
opacityは透明度の事で”0″にすると透明になります。スーっと消えていくアニメーションを作る場合に利用しましょう。
実際にCSSアニメーションを作ってみよう！
エンドレスのアニメーションを作ろうと思うので「Infinite repeat」にチェックを入れます。
タイムラインの2メモリ辺りにピンを打ち、青いオブジェクトと右上に移動させます。
ピンを売った際、青いオブジェクトが斜めに表示される場合は「Reset」を押しましょう。
デフォルトで設定されているアニメーションが削除できます。
今回は全部で6コマのアニメーションにしました。
コマ数を調整すればより滑らかなアニメーションも可能でしょう。
最後に出力されたコードをコピーしてアニメーション作成は終了です。
WEBサイトに表示するための設定に入りましょう。
CSSアニメーションをサイトに表示させよう！
.anime1{
animation: frame1 linear 4s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-animation: frame1 linear 4s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
-moz-animation: frame1 linear 4s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
-o-animation: frame1 linear 4s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
-ms-animation: frame1 linear 4s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;
}
@keyframes frame1{
0% {
transform: translate(0px,0px) ;
}
20% {
transform: translate(48px,-50px) ;
}
40% {
transform: translate(106px,-63px) ;
}
61% {
transform: translate(158px,-59px) ;
}
80% {
transform: translate(201px,-27px) ;
}
100% {
transform: translate(251px,0px) ;
}
}
@-moz-keyframes frame1{
0% {
-moz-transform: translate(0px,0px) ;
}
20% {
-moz-transform: translate(48px,-50px) ;
}
40% {
-moz-transform: translate(106px,-63px) ;
}
61% {
-moz-transform: translate(158px,-59px) ;
}
80% {
-moz-transform: translate(201px,-27px) ;
}
100% {
-moz-transform: translate(251px,0px) ;
}
}
@-webkit-keyframes frame1 {
0% {
-webkit-transform: translate(0px,0px) ;
}
20% {
-webkit-transform: translate(48px,-50px) ;
}
40% {
-webkit-transform: translate(106px,-63px) ;
}
61% {
-webkit-transform: translate(158px,-59px) ;
}
80% {
-webkit-transform: translate(201px,-27px) ;
}
100% {
-webkit-transform: translate(251px,0px) ;
}
}
@-o-keyframes frame1 {
0% {
-o-transform: translate(0px,0px) ;
}
20% {
-o-transform: translate(48px,-50px) ;
}
40% {
-o-transform: translate(106px,-63px) ;
}
61% {
-o-transform: translate(158px,-59px) ;
}
80% {
-o-transform: translate(201px,-27px) ;
}
100% {
-o-transform: translate(251px,0px) ;
}
}
@-ms-keyframes frame1 {
0% {
-ms-transform: translate(0px,0px) ;
}
20% {
-ms-transform: translate(48px,-50px) ;
}
40% {
-ms-transform: translate(106px,-63px) ;
}
61% {
-ms-transform: translate(158px,-59px) ;
}
80% {
-ms-transform: translate(201px,-27px) ;
}
100% {
-ms-transform: translate(251px,0px) ;
}
}
今回は弊社のロゴで確認するので下記のようにimgタグにクラスを付けます。
<img src="https://axel-media.com/wp/wp-content/uploads/2017/09/logo.svg" class="anime1">実際のアニメーションがこちら
見事に表示することができました。
難しいと思われていたCSSアニメーションをだれでも簡単に扱う事ができます。
CSSアニメーションのサンプルを試す
「Example」をクリックすると選択画面が表示されるので、色々試してみましょう。
まとめ
フラッシュの廃止によりJavascriptやCSSアニメーションを用いることが多くなっています。
今回紹介しましたジェネレーターを使えば簡単にCSSアニメーションを実装する事ができるので、ぜひ一度お試しください。