おもしろいアニメーションを作ってみませんか?

今までのWebページで動いていたアニメーションは、アニメーションGIFや、Flashアニメーション、JavaScriptなどで作られていましたが、CSS3のanimationプロパティを使うだけで、アニメーションが作れるようになりました。
Webページを作る際に、スタイルシート(CSS)にCSS3仕様に従ってanimationプロパティを追記するだけで、ボックス(div、p、spanなど)やボックスに入れたテキスト文字や画像(img)の形や色を変化させたり、移動・回転・2D変形・3D変形させたりしてアニメーションを作ることができるようになったのです。次のサンプルアニメーションもすべてCSS3だけで作られています。
画像をクリックしてください。サンプルアニメーションのビデオを見ることができます。(ブラウザ上で動いているCSS3アニメーションをビデオ撮影したものです。)
●現れては消える手
ReviveAnime3
●円運動するシャトル
CircleAnime1
●楕円運動するシャトル
OvalAnime1
●渦巻運動するシャトル
SpiralAnime1
●旋回するトンボ
WhirledAnime
●蛇行するシャトル
WindingAnime1
●落下・バウンドの軌跡
Gravity2
●線形グラデーションのanimation
LinearGradAnime
●文字形に線形グラデーションを抜く
LinearGradInTextAnime1
●円形グラデーションのanimation
RadialGradAnime
●文字形に円形グラデーションを抜く
RadialGradInTextAnime4
●1つの画像を分割してanimation
ClipAnime1
●写像のanimation
ReflectAnime5
●円周を回るテキスト
CharRotateAnime
●飛び交うテキスト
FlyingTextsAnime
●文字が振動するタイトル
TitleAnime03
●文字が転がって来るタイトル
TitleAnime08
●ネオンサイン文字のタイトル
TitleAnime10
●グラデーション文字のタイトル
TitleAnime11
●文字が鮮明になるタイトル
TitleAnime13
●ボタンの中にグラデーション
NaviBtnAnime02
●ボタンの中にイラストのアニメ
NaviBtnAnime03A
●メニューバーの中の太陽系宇宙
NaviMenuAnime01
●アコーディオンメニューの中のアニメ
NaviMenuAnime03
●ボーダーのアニメーション
BorderAnimation
●マーキー(流れる文字)1
MarqueeAnime1
●マーキー(流れる文字)2
MarqueeAnime2
●熱帯魚のキッス
KissingFishesAnime
●地球を回る月
MoonOrbitAnime
●カラーホイール
WheelAnime
●レンガ塀とゴキブリくん
BrickWallAnime2
●3枚のカード
OpenCardsAnime2
●外側と内側が逆回転する画像
BackfaceVisibilityAnime9
●円形の3DCube
3DCubeAnime2
●フレームの3DCube
RotateCubeFrame1
●画像の3DCube
RotateCubePic
●テキストの連続運動
BoundSwingText
●四角形から円形へ変化し回転
MorphAndTextAnime
●回転移動する文字
RollingCharctersAnime2
●景色を動かす(~車窓から~)
ViewFlowAnime
●クマの散歩1
BearWalk1Anime
●クマの散歩2
BearWalk2Anime
●バウンドするサッカーボール
BounceBall4
●人のように歩くロボット
RobotWalkAnime
●スウィングするロボット
RobotSwingAnime
●ジャパングランプリ
DrivingAnime
●宇宙旅行へ出発
SpaceTripAnime
●舞い落ちる枯れ葉
FallingLeavesAnime
●紅葉と枯れ葉のイメージ
AutumnImageAnime
●カルーセル横回転
RoundImagesAnime3
●カルーセル文字
RoundImagesAnime4
●カルーセル縦横回転
RoundImagesAnime6
●カルーセルフォトギャラリー1
RoundPhotoGallery
●カルーセルフォトギャラリー2
SlidePhotoGallery
●UFO出現
RollingUFOs
●ブラックホール
BlackHole
●湧き出るあぶく
Bubbles
●ワープ
WarpDots
●湧き出る角丸四角形
WarpRects

こんなトランジションも作れます!

トランジション(transition)は「時間をかけた変化」という意味です。トランジションを使って、開始から終了までの時間を指定すると、その時間内で滑らかに要素(ボックス、画像、テキスト(文字)などをを変化させることができます。トランジションを使うと、web上でいろいろと面白いことができます。
画像をクリックしてください。サンプルトランジションのビデオを見ることができます。(ブラウザ上で動いているCSS3トランジションをビデオ撮影したものです。)
●ピエロの玉乗り
PierrotOnBall
●飛翔するテキスト
FlyingText2D
●回転しながら広がる画像1
ParentAndChild-08
●回転しながら広がる画像2
Nth-Child2
●色を変化させる
ColorChange
●2Dフォトギャラリー
2DPhotoGallery1
●3Dフォトギャラリー
3DPhotoGallery
●ボーダーを変化させる
BorderTransition
●グラデーションが変化するボタン
NaviButton05B
●グラデーションが回転するボタン
NaviButton05D
●プラスチック風のボタン
NaviButton06C
●レインボーカラーのメニューバー
NaviMenu01F
●スライドするメニューバー
NaviMenu02C
●カーテンメニュー
NaviMenu08
●タブ付きメニュー
NaviMenu09S
●パネルボードメニュー
NaviMenu12B
●リニア(線形)グラデーション
LinearGradTransition
●ラディアル(円形)グラデーション
RadialGradTransition

こんなこともできます!

CSS3では線形グラデーション(Linear Gradient)と円形グラデーション(Radial Gradient)が使えるようになりました。とても綺麗なグラデーションが作れます。
また、CSS3プロパティを利用していろいろな図形を描くことができます。-webkit-系の仕様になりますが、飾り文字が作れます。
これはアニメーションやトランジションをさせていませんので、画像をクリックしても変化はありません。
●リニアグラデーション(線形グラデーション)
CSS3ではリニアグラデーション(線形グラデーション)という、一方向へ向けて色を徐々に変化させるグラデーションを描けるようになりました。
LinearGradation
●ラディアルグラデーション(円形グラデーション)
CSS3ではラディアルグラデーション(円形グラデーション)という、円状、だ円状に外側に向けて色を徐々に変化させるグラデーションを描けるようになりました。
RadialGradation
●飾り文字を作る(英字)
Safari(webkit系ブラウザ)とChrome(webkit系も対応)だけの機能です。webkit系ブラウザの-webkit-text-~プロパティを使用してテキストの輪郭や色を描きます。またtext文字の形に合わせて背景を抜き出します。
DecoratedTextE
●飾り文字を作る(日本字)
Safari(webkit系ブラウザ)とChrome(webkit系も対応)だけの機能です。webkit系ブラウザの-webkit-text-~プロパティを使用してテキストの輪郭や色を描きます。またtext文字の形に合わせて背景を抜き出します。
DecoratedTextJ
●図形を描く
HTMLの要素は基本的にボックスなので、CSSで指定できる形状は矩形(四角形)です。またborder-radiusプロパティを使用して、矩形の角を丸くしたり円形にしたりすることができます。これに三角形にする裏技があれば、CSSだけでさまざまな図形を描くことができます。
Shapes