いえーいCSSでぐりぐり動かしてますか！

やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。

CSSでのアニメーションは二種類

実はCSSのアニメーション、と言っても二種類あります。

• transition … マウスホバーとかの操作時に動くやつ
• animation … ずっと動き続けるやつ
• プロパティは割と似てる
• 今のところ、どちらもベンダープレフィクスが必要

頻繁に使われるのは前者でしょうか。

transitionでさくっとアニメーション

リンクにカーソルを載せると文字色が変わる、という例。

:link {
  color: #00f;
  transition: color .5s;
}
:link:hover {
  color: #f00;
}

• transitionプロパティで設定します。
• 値は「変化させたいプロパティの名前」と「変化にかける時間」です。
  • 時間の単位はsで、secondsつまり秒です。
  • （ちなみにCSSは0.1を.1と記述する事が出来ます。）
• 複数設定する場合はカンマ,で区切ります。
• 他に変化のさせ方と、変化前の待ち時間を設定する事が出来ます。

animationでがつっとアニメーション

.selector {
  animation: blink 1s infinite;
}
@keyframes blink {
      0% { opacity:1 }
    100% { opacity:0 }
}

• animationと@keyframesの二種類が必要です。
• animationから利用するkeyframesの名前を指定します。
• @keyframesでアニメーションの内容を指定します。
• animationで指定するのは全体の時間です。
• @keyframesで指定するのは時間のうちの進行割合です。
• 再生時間はanimationで指定します。
• 何も指定しなければ、アニメーションは0→100%までやって終わります。
• infiniteを指定すると、何度も繰り返します。
• alternateを指定すると、行って戻ってが出来ます。

もっとくわしく

MDNあたりを。

• transition – CSS | MDN
• animation – CSS | MDN

おしまい

実は後日の記事への布石です。

CSS おれおれ Advent Calendar 2012 – 07日目

寝るまでが今日です。（ｷﾘｯ

JavaScriptで拾うボタン風の要素にcursor:pointerのように指定した事もあるんじゃないかと思うんですが、それです。

結構色々と種類があるので、一覧を眺めておくと良いんじゃないでしょうか。特にアプリを作る方。

追記 2012-12-08: タイトルを「36+α種類」から「35+α種類」に変更。数え間違えてました……。

cursorプロパティの値一覧

各行ではそのcursorを設定しています。カーソルを乗っけてみてください。変化ない場合、ブラウザーがそのカーソルに対応してないです。

あとCSS 2.1の時点で仕様として定められてあったものは明記してあります。（18個）　記載ないものは全てCSS3ですね。

(さらに…)

はい、作りました。名前どうしようかなあと思ったんですが、なんかもういいやこれで……。

• 外面さん https://ginpen.com/lab/sotodura/

指定ユーザーの発言のうち、誰かに宛てたもの（in_reply_toがあるもの）を除いて表示するツールです。主な用途としては、

• 自分の発言が他人から見たときにどう表示されているのか？
• あるユーザーをフォローした場合、自分のタイムラインにどう現れるのか？

を確認するのに良いんじゃないかなあと思ってます。よければ使ってみてくださいませ。

さてこの記事では、作るにあたっての技術的なところを少々つぶやいてみます。

GET search APIを利用

twitterのGET searchというAPIを利用しています。

• GET search | Twitter Developers

JavaScriptを用いてこれをJSONPで取得して、解析、画面構築を行います。

あれこれを削ぎ落とした簡単なサンプルを置いておきます。

Twitterの検索APIをJavaScriptから – jsdo.it – share JavaScript, HTML5 and CSS

from:useridで検索

これはtwitterの裏技的なお話なのですが、検索キーワードとして”from:XXX”とするとXXXというIDのユーザーの発言を得る事ができます。

あ、試しに前述のサンプルで試してみてください。

ちなみに”to:YYY”だとYYYさん宛の発言になります。二つを組み合わせると、「あの人たちって普段どういう会話してるの……？？」を検索できたりします。

自己満足的に最新技術を利用

HTML 5の要素を使ったり、CSS 3のスタイルを使ったりしてます。HTML 5 APIは特に使ってませんけど。

IEはちょっと表示が崩れますが、まあ気が向いたら直すという方向で。html5.jsとie9.jsを使ってます。

元ネタはこちら：

• 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス
• 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

細部にこだわったWebデザインって？

ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。

• グラデーションを加える
• 1pxのラインを加える
• シャドウを加える
• ノイズを加える
• レタープレス効果

元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。

デモ

先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。）

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS

(さらに…)

OS X Lionが登場しましたが、いかがお過ごしでしょうか。僕はまだ入手していませんが、人に見せてもらってちょっと欲しくなりました。

まあそれは置いておいて、MacのDockって便利ですよね。そのDock風のユーザー体験を、JavaScriptなしで作ってみました。

• Chrome, Safari … 一番綺麗に動きます。
• Firefox … 鏡面反射がない以外は十分に動きます。
• Opera … Firefoxと同程度なのですが、素早く動かしたときに何故か描画が崩れるようです。
• IE … お察しください。

追記 : Firefox対応版を作って下さった方がいます！　（20:34）

• -moz-element(with SVGmask)で Fxでもreflection (forked: CSSだけでMacのDockみたいなの – jsdo.it – Share JavaScript, HTML5 and CSS

デモ

jsdo.itをご覧ください:

もっとそれっぽく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

コードと解説

jsdo.itの方をご覧ください。

• もっとそれっぽく forked: CSSだけでMacのDockみたいなの – jsdo.it – share JavaScript, HTML5 and CSS

装飾的な部分を除いた、動き自体はこちらのサンプルをどうぞ:

• CSSだけでMacのDockみたいなの – jsdo.it – Share JavaScript, HTML5 and CSS

要点をまとめると、

• マウスを乗せたら大きくする
• 大きくするときはアニメーションする

これだけです。

ただし文字サイズが変わるとベースラインが変化してしまい、ガタガタしてしまうので、各項目はdisplay:table-cellとして独立させる事にしました。これは項目の内容としてちゃんと画像を用意しておけば防げたかもしれません。

よければ画像を用意して、上記コードをforkしてみてくださいな。