スキップしてメイン コンテンツに移動

CSS3でアニメーションを作ってみよう(理論編)

こんにちは、クリエイティブフレークです。



Windows XPのサポートが終了してから、国内のIE10のシェア率が急激に高まり、Chromeも急伸しています。

これまでどうしてもIEの古いバージョンのユーザーのことを考慮すると、完全CSS3はまだ先かなと思うところでしたが、そろそろ勉強し始めどきかもしれません。

今回はCSS3だけで動くアニメーションの簡単なサンプルを。

【デモ : DEMO】CSS3だけでアニメーション



そもそも、アニメーションといえば、
・gif(Photoshopなどでタイムラインでコマ送り。あくまで画像なのでパラパラ漫画と同じ理論。)
・Flash(タイムラインもしくはプログラミングで制御。見るにはFlash Playerのインストールが必要。)
・jQuery(JavaScript言語を使用して動的に制御。)

時代ごとに移り変わってきましたね。

では、こんなにアニメーションは存在するのに、なんでCSS3を使いたがるの?

・gifの欠点
gifアニメーションの欠点は細かく動かすとファイル容量が大きくなります。
また、滑らかな動きには向いていません。

・Flashの欠点
FlashはFlash Playerが必要なので、インストールしていないPCや、スマートフォンには対応していません。

・jQueryの欠点
jQueryはプログラミング可能なので、細かく動作を指示できますが、jQueryを使用する場合、JavaScript単体とjQuery本体の組み合わせで、ファイルは大きくなります。



ここで登場するのがCSS3。以前ならマークアップ言語で動作の指示ができるなんて思ってもみませんでした。

今回の目標
・CSSで丸や四角などの図形を描く
・CSSで回転させる
・CSSでフェードさせる



【デモ : DEMO】CSS3だけでアニメーション


▲こんなかんじ

今回のデモのソースコードはすべてHTML内に記述してあります。

ソースコードが長いので、ここでは解説だけを記載します。



サンプルソースコードの解説


div {
  position: absolute !important;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  width: 200px;
  height: 200px;
  background-color: #e94c3d;
  -webkit-animation: transform 4s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;
  -moz-animation: transform 4s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;
  -ms-animation: transform 4s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;
  -o-animation: transform 4s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;
  animation: transform 4s .5s infinite cubic-bezier(1,0.15,.29,1.21) alternate;
}


ここでdivタグで図形を描きます。
width: 200px と height: 200px の部分が、正方形を表します。
背景色(background-color)お好きな色を。

position: absolute !important と top, left は、見やすくするために画面の上下中央に配置しています。

-webkit-animation は、Chromeでの動作指示
-moz-animation は、FireFoxでの動作指示
-ms-animation は、IEでの動作指示
-o-animation は、Operaでの動作指示、そして
animation は、ブラウザ指定なしでの動作指示を意味し、animation がアニメーションです。

animation: (関数名 持続時間 ディレイ時間 繰り返し回数 動き方 逆再生)

このdivの場合は、「transformという関数(別に指示)で、開始から0.5秒だけ遅延させ、4秒かけて(1,0.15,.29,1.21)という動き方で逆再生しながら無限にアニメーションさせる。」と翻訳できます。



次はChromeの指示ですが、

@-webkit-keyframes transform {
  0%  {
    border-radius:0 0 0 0;
    background:#e94c3d;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:#f2c42d;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:#1bbc9b;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:#2d3d50;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:#9b58b5;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}


0%から100%まで、25%刻みでどんな色、形になっているかを指示しています。

たとえば0%のときは、
border-radius の値がすべて0なので、正方形ですね。
背景色はお好きな色を、
そして先ほどの関数の説明、rotate(0deg) は、0度で回転した状態を意味します。つまり、何も回転してないってことですね。

もう一例、25%のときは、 border-radius が1番目の値だけ50%なので、左上の角が丸くなって、残りは角のままという状態です。

さらに、rotate(45deg) から、45度だけ回転をしている状態です。



それぞれの時間の状態になるように、先にdivで定義したような動き方をしなさい、という指示ですね。



そして、Chrome、FireFox、IE、Operaと同様にCSSを追加し、最終的にすべてのブラウザに対応できるように、@keyframes transform {} を記述しましょう。



見ての通りですが、回転角度は rotete(数値deg)です。

参考までに、cubic-bezier(1,0.15,.29,1.21) という数字をどうやって出すか、ですが、http://matthewlein.com/ceaser/で、動かしたい種類を選ぶだけで数値を表示してくれます。

※今回使用した、「transform」という関数名は、好きな名前に変更できます。




Written by Creative Flake

コメント

このブログの人気の投稿

ブログ移転のお知らせ

いつもご覧いただきありがとうございます。 当ブログは下記URLへと引っ越しました。 http://blog2.creativeflake.com/ 今後はこちらをご覧ください!!

太字にしても文字を潰さない方法「太字に強い無料の日本語フォント」付き

PhotoshopやIllustratorなどで、太文字を書きたいとき文字がつぶれて見づらいことはありませんか? つぶれ文字の場合 文字がつぶれてしまった場合の多くは、 ・ボールド「B」で太くしている ・枠線をつけて太くしている こういうケースが多く見られます。 これは、元の文字の外側に太線をつけるため、スキマが埋められてしまうことでつぶれて見えるためです。 つぶれない文字にするには 文字をつぶさないようにするには、文字そのもののウェイトで調整します。 ウェイトというのは「太さ」という意味です。 例えば、「●●ゴシック-M」とか、「▲▲明朝-W3」などという、フォント名の最後にアルファベットや数字がついているのを見たことはありませんか? まずはフォント(文字)を選ぶ際に、ウェイトのバリエーションが存在するかどうか確認してから使うことをおすすめします。 太字にできる無料の日本語フォント そもそもどんなフォントが太字のバリエーションがあるのか、今回は無料の日本語フォントを紹介します。 M+フォント やや丸みのあるやさしいイメージのゴシックフォント。 極細から太字までフォントウェイトがあります。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Kazesawaフォント こちらも丸みのある、認識性の高いフォントです。 エクストラライトからエクストラボールドまで6種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード 源ノ角ゴシック AdobeとGoogleが共同開発したオープンソースのフォントです。 エクストラライトからヘビーまで7種類のウェイトがあります 【ライセンス】SIL Open Font License準拠 配布サイトでダウンロード Rounded M+ 丸ゴシックのかわいい感じなのに品のあるのフォントです。 また、「標準」、「丸さ強め」、「丸さ弱め」からも選んでダウンロードが可能です。 【ライセンス】商用・非商用可。利用、複製、再配布可能。 配布サイトでダウンロード Written by Cr...