そこで、文字を少しでもきれいに見せたいときに役立ちそうな
font-smoothingの備忘録兼紹介記事です。

概要

最近Google+で「レフ女」という活動をしているのですが、
Google+は全体的にスッキリとした印象があり、
文字がきれいだなと思って調べていた所発見したのが「-webkit-font-smoothing」です。
cssで設定できるテキストレンダリング方式で、
下記3つの値を持っています。

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased; // Safari での Default値

さらに調べてみたところ、Firefox用の「-moz-」でも似たようなレンダリング指定方法はあるようです。

-moz-osx-font-smoothing: auto;
-moz-osx-font-smoothing: grayscale;

サンプル その1

上記各値をそれぞれ実験してみました。
まずは、-webkit-font-smoothingを使用したもののサンプルです。

次に、-moz-osx-font-smoothingを使用したもののサンプルです。

ブラウザ上からは、こちらからサンプルを見ることができます。

サンプル その2

さらに、-webkit-font-smoothingで見ているときを拡大して見てみました。
左から順に、antialiased、subpixel-antialiased、noneです。

次に、-moz-osx-font-smoothingで見ている時を拡大してみました。
左がnone、右がgrayscaleです。

結論

-webkit-の方に関しては、
英語だけのタイトル（特にfont-weight:boldのとき）などには、antialiasedがきれいに映えますが、
日本語を含むテキストの場合には、細くなりすぎて読みづらくなってしまう可能性もありそうです。

-moz-の方に関しては、
-webkit-にantialiasedと指定した時のみgrayscaleを指定すると、
ブラウザ間での見え方の差が小さくすみそうだなと思いました。

ちなみにこのサイトでは、

-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: none;

という設定にしています。

参考にさせていただきました：
http://qiita.com/htomine/items/3086f30ca09adea2f8e0

本文など、これまで「環境依存だから」といって、
デバイスフォントが関わってくる部分をおざなりにしているWebサイトが数多くあると思います。

特に技術の進化により仕様も10年前と比べてだいぶ制御しやすくなってきている以上、
Webが持つ本来の「情報伝達」という意味を最大限引き出すためには、
Webデザイナーと名乗る人は、
もっと文字の「見え方」「読みやすさ」に気を配るべきなのではないでしょうか。
（という自分への戒めでもあります）

おまけ

他にも、私が美しいと思ったTIPSを紹介します。

・CSSでUnicodeを指定して和欧混植
http://fontplustips.com/tips/item/15-webtypobasic5.html

・ヒラギノとHelvetica Neue の混植スタイル
http://qiita.com/Tadaki/items/b7e1f337ddeeb1d8f115

このあたりについては、また次回以降に詳しく記事を書こうと思います。

追記

font-smoothingの切り替えに使えそうな@mixinがありました。
http://maximilianhoffmann.com/posts/better-font-rendering-on-osx

iPhone6 Plusでは@2xどころか、@3xになってしまったりと、
これからもデバイスの多様化・ユーザー環境の多様化は
どんどん進んでいくのだと思います。

その多様なデバイス1つ1つに対応していくのはとても大変なので、
それをどう効率よく、美しく見せるか、ということを
考えていかないといけないですね。

そこで今日は、アイコンを使う際にとても便利な
通称「アイコンフォント」の作り方について書きたいと思います。

フォント化する際には、「IcoMoon」というWebサービスを利用します。

1. Illustratorでアイコンを作る

Adobe Illustratorを使って、アイコンを作ります。
アートボートのサイズは正方形であれば何でも良さそうです。
今回100px四方でつくってみました。

2. svgとして保存する

svgとして保存します。

保存する際、「オプション」内の「画像の場所」については、
一応どちらを選択しても大丈夫でしたが、
埋め込みにするとファイルが重くなってしまうので「リンク」での配置を推奨します。
参考：http://helpx.adobe.com/jp/illustrator/kb/5710.html

3. svgファイルをアップロード

先ほどもあげた「ICONVAULT」へアクセスし、ファイルをアップロードします。
左上のImportIconsからアップロードすることができます。

4. フォントを生成する

自分でアップロードしたものや、
それ以外にもIcoMoon内にあるアイコンを使うものだけ選択したら、
右下の「Font」タブをクリックし、生成画面へと移動します。
アイコン自体の名前を変更することができます。

5. フォントをダウンロード

名前の変更を終えたら、右下の「Font」タブの下の「Download」をクリックすると
デモファイルとフォントファイル一式がダウンロードされます。

あとは、fontsファイルを使用したいhtmlファイルの中へ入れて、

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-2kl9nb');
	src:url('fonts/icomoon.eot?#iefix-2kl9nb') format('embedded-opentype'),
		url('fonts/icomoon.woff?-2kl9nb') format('woff'),
		url('fonts/icomoon.ttf?-2kl9nb') format('truetype'),
		url('fonts/icomoon.svg?-2kl9nb#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

のように、フォント設定をcss内へ記述すれば自由に使用することができます。

<i class="icon-xxxxx"></i>

のように使いたい場合は、ダウンロードしたフォルダ内のstyle.cssを丸ごとコピペすれば使用可能です。

自分で作ったアイコンがフォント化できると、
@2xも@3xもわざわざ画像を作る必要がないので
手間がすごく省けそうです。
これからどんどん活用していきたいと思います。

参考記事：
http://liginc.co.jp/web/design/font/33237

これを逆再生するようにすれば、商品説明の表示などに使えるかもと思い、
実装してみました。

VIEW DEMO

<div class="container">
	<div class="box" id="text1">
		<div class="bd12 bd">
			<div class="bdT"></div>
			<div class="bdB"></div>
			<div class="bdR"></div>
			<div class="bdL"></div>
		</div>
	</div>
	<div class="box" id="text2">
		<div class="bd12 bd">
			<div class="bdT"></div>
			<div class="bdB"></div>
			<div class="bdR"></div>
			<div class="bdL"></div>
		</div>
	</div>
</div>

.container {
    background: url("../images/sample.jpg") no-repeat top left;
    height: 600px;
    background-size: 900px auto;
    position: relative;
    width: 900px;
    margin: 30px auto;
}
.container .box {
    width: 200px;
    height: 200px;
    text-align: center;
    position: absolute;
    z-index: 20; 
}
.container .bd div {
    background: #fff;
    position: absolute;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; 
}
.container .bd div.bdT {
    width: 15%;
    height: 1px;
    top: 100px;
    left: 85px; 
}
.container .bd div.bdB {
    width: 15%;
    height: 1px;
    top: 100px;
    left: 85px;
}
.container .bd div.bdR {
    height: 15%;
    width: 1px;
    top: 85px;
    left: 100px; 
}
.container .bd div.bdL {
    height: 15%;
    width: 1px;
    top: 85px;
    left: 100px; 
}
.container .bd12 div {
    -webkit-transition: all 0.2s;
    transition: all 0.2s; 
}
.container .box:hover .bd12 div.bdT {
    width: 100%;
    -webkit-transform: translate(-85px, -100px);
    -moz-transform: translate(-85px, -100px);
    transform: translate(-85px, -100px); 
}
.container .box:hover .bd12 div.bdB {
    width: 100%;
    -webkit-transform: translate(-85px, 100px);
    -moz-transform: translate(-85px, 100px);
    transform: translate(-85px, 100px); 
}
.container .box:hover .bd12 div.bdR {
    height: 100%;
    -webkit-transform: translate(-100px, -85px);
    -moz-transform: translate(-100px, -85px);
    transform: translate(-100px, -85px); 
}
.container .box:hover .bd12 div.bdL {
    height: 100%;
    -webkit-transform: translate(100px, -85px);
    -moz-transform: translate(100px, -85px);
    transform: translate(100px, -85px); 
}
.container #text1 {
    top: 102px;
    right: 84px; 
}
.container #text2 {
    top: 356px;
    right: 233px; 
}

div.containerは背景に画像を敷くためのboxです。
その中にdiv.boxを作り、position: absolute;で
.containerの中で絶対値指定によりプラスマークを表示する位置を調整します。

また、div.bdTとdiv.bdBはプラスの横棒、
div.bdRとdiv.bdLはプラスの縦棒になっています。
それぞれdiv.boxの中心で重なりあうよう指定します。

マウスホバー時にdiv.bdTは上端に、div.bdBは下端に、
div.bdRは右端に、div.bdLは左端に移動し、
四角形の各ボーダーとなるよう指定します。

このようにすることで、マウスホバー前にはプラスマークが表示され、
マウスホバーをするとプラスが開いてdiv.box内の
コンテンツが表示されるようになっています。

ちょっとアレンジを加えてみただけですが、
とても勉強になりました。

CSS TransitionsとCSS Transformsを使用しているため、
Chrome, Firefox, Safari, IE 10〜の対応となります。

早速、DEMOをご覧ください。
VIEW DEMO

前回紹介したものの中から2つピックアップし、
私なりにカスタマイズしてみました。

#01 大カッコ出現アニメーション

こちらはマウスホバーをすると大カッコ[]が
内側から外側へアニメーションしながら表示されるものです。
文章中に使用するのは難しそうですが、
ナビゲーションや各セクションのタイトルなどに
使用すると良さそうです。

<div class="sample effect-1">
	<a href="#">Chitep!</a>
</div>

.inner .effect-1 a::before, .inner .effect-1 a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s; }
.inner .effect-1 a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px); }
.inner .effect-1 a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px); }
.inner .effect-1 a:hover::before, .inner .effect-1 a:hover::after, .inner .effect-1 a:focus::before, .inner .effect-1 a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px); }

擬似要素::beforeと::afterに大カッコをつけておきますが、
このときopacityは0にしています。
擬似クラス:hoverが追加された際、
transformを使用して左右に移動させながら
opacityを1にすることで、
内側から外側へふんわり表示されるアニメーションができています。

#02 背景に円が出現アニメーション

こちらはマウスホバーで
文字に半透明の円が重なって表示されるものです。
文章中や送信などのアクションが起こるボタンに
使用すると良さそうです。

<div class="sample effect-2">
	<span><a href="#">Chitep!</a></span>
</div>

.inner .effect-2 span {
    display: block;
    position: relative; }
.inner .effect-2 a::before, .inner .effect-2 a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2); }
.inner .effect-2 a::after {
    width: 120px;
    height: 120px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8); }
.inner .effect-2 a:hover::before, .inner .effect-2 a:hover::after, .inner .effect-2 a:focus::before, .inner .effect-2 a:focus::after {
    opacity: 0.6;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1); }

擬似要素::beforeと::afterにborder-radius: 50%;で
半径の異なる円を作成しておき、opacity: 0;で隠しておきます。
マウスホバーで表示される、というシンプルなものです。
円を文字の中心に持ってくるために、
文字をspanで囲みposition: relative;を指定、
円はposition: absolute;で真ん中に来るようにしています。

#03 Google Material Design風？なアニメーション

こちらは先日のGoogle I/Oで発表された
Material Designっぽさをイメージしてみました。
（スクリーンショット撮れなくてPhosohopで適当に追加した白い丸なので
実際のアニメーションをご覧ください）

<div class="sample effect-3">
	<span><a href="#">Chitep!</a></span>
</div>

.inner .effect-3 span {
    display: block;
    position: relative; }
.inner .effect-3 a::before, .inner .effect-3 a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
    transform: translateX(-50%) translateY(-50%) scale(0.2); }
.inner .effect-3 a::after {
    width: 120px;
    height: 120px;
    border-width: 6px;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
    transform: translateX(-50%) translateY(-50%) scale(0.8); }
.inner .effect-3 a:hover::before, .inner .effect-3 a:hover::after, .inner .effect-3 a:focus::before, .inner .effect-3 a:focus::after {
    animation-duration: 0.5s;
    animation-name: likeGoogleMaterial;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: likeGoogleMaterial;
    -moz-animation-duration: 0.5s;
    -moz-animation-name: likeGoogleMaterial; }

@keyframes likeGoogleMaterial {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) translateY(-50%) scale(1); }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(2); } }

@-webkit-keyframes likeGoogleMaterial {
  0% {
    opacity: 0.6;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(2); } }

@-moz-keyframes likeGoogleMaterial {
  0% {
    opacity: 0.6;
    -moz-transform: translateX(-50%) translateY(-50%) scale(1); }

  100% {
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%) scale(2); } }

こちらは先程の#02に加えて、
Animation keyframeを用いて円が拡大しながらフェードアウトするようにしています。

IE10が早く普及してくれることを祈るばかりです。

そこで今回は参考になりそうなホバーエフェクトアニメーションを集めたサイトをご紹介します。

といってもどれも画像では伝わらないため、
ぜひリンク先へ行って１セクションずつホバーしてみてください。

ソースは下記リンクからダウンロードができます。
http://tympanus.net/codrops/2013/08/06/creative-link-effects/

スライドショーだったり、

カルーセルだったり、

それぞれなんて呼ぶのが正しいのかはわかりませんが、
今や多くのWebサイトに設置されているスライダーの
画像切り替え時のアニメーションを試すことが出来るサイトです。

それぞれ20種類前後のアニメーションを試すことができるので、
どんなアニメーションが気持ち良いか、ユーザーにとってわかりやすいか
非常に勉強になるかと思います。

下記リンクからソースをダウンロードすることができます。
http://tympanus.net/codrops/2014/03/18/inspiration-for-item-transitions/

2回目でちらつきを修正する際に、jQueryに頼らざるをえない！と思ってしまったのですが、ご指摘いただき、CSSのみで実装が可能ということがわかりました。

今回こそ完結編としてCSSだけでなめらかな、ぽよんっ！を実装していきます。

DEMO
別ウィンドウで開く

HTML

<div class="box">
	<div class="animBallBox">
		<div class="animBall"></div>
	</div>
</div>

前回と変わっていません。
.animBallBoxという大きさが固定された箱の中に、.animBallという動かす丸を入れています。

CSS

.box {
	width: 200px;
	height: 200px;
	position: relative;
}
.animBall {
	width: 60px;
	height: 60px;
	background-image: url(../images/sample.png);
	background-size: 100% 100%;
}
.animBallBox {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	margin-left: -30px;
}
.animBallBox:hover > .animBall {
	animation: animScale 0.4s ease-out;
	transform-origin: 50% 50%;
	-webkit-animation: animScale 0.4s ease-out;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: animScale 0.4s ease-out;
	-moz-transform-origin: 50% 50%;
}
@keyframes animScale {
	0% { transform: scale(0.8, 0.8); }
	40% { transform: scale(1.2, 1.2); }
	60% { transform: scale(1, 1); }
	80% { transform: scale(1.1, 1.1); }
	100% { transform: scale(1, 1); }
}
@-webkit-keyframes animScale {
	0% { -webkit-transform: scale(0.8, 0.8); }
	40% { -webkit-transform: scale(1.2, 1.2); }
	60% { -webkit-transform: scale(1, 1); }
	80% { -webkit-transform: scale(1.1, 1.1); }
	100% { -webkit-transform: scale(1, 1); }
}
@-moz-keyframes animScale {
	0% { -moz-transform: scale(0.8, 0.8); }
	40% { -moz-transform: scale(1.2, 1.2); }
	60% { -moz-transform: scale(1, 1); }
	80% { -moz-transform: scale(1.1, 1.1); }
	100% { -moz-transform: scale(1, 1); }
}

変更したのは21行目の
.animBallBox:hover > .animBallです。

前回も説明させていただいたとおり、ちらつきを抑えるために
.animBallBoxにマウスオーバーした際に.animBallをアニメーションさせています。

CSSセレクタを使いこなせばある程度のことはjQueryに頼らなくてもできるようです。

参考にさせていただきました。
意外と知らない!?CSSセレクタ20個のおさらい

CSS3でマウスオーバーすると画像がぽよんっと動くアニメーション

ですが、ぽよんっ！というアニメーションがちらついて見えてしまっていました。

原因は、画像の端のほうでマウスオーバーをした場合に、
丸が一度小さくなる際マウスオーバーの状態から外れてしまうことによって、CSSの擬似クラス:hoverに定義したアニメーションが効かなくなることによるものです。

そこでこのちらつきをなるべく簡単に改善するために

• .animationにアニメーションを定義
• .animBallBoxという箱で丸を囲い、
  箱にアニメーションクラスを追加／削除でアニメーション開始／終了

と修正することにしました。

CSS3だけでは箱Aを:hoverした際に、箱Bをアニメーションさせるということができなさそうだったので ((追記：CSS3だけでも実装可能とご指摘いただきました。次回CSS3だけでの実装を紹介させていただきます。)) 、jQueryのaddClassとremoveClassを使いました。

[BEFORE]
別ウィンドウで開く

[AFTER]
別ウィンドウで開く

特に丸の縁に近い方にマウスオーバーをしてみると、違いがよく分かるかと思います。

では、コードです。

HTML

<head>内でjQueryを読み込みます。

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

<div class="box">
	<div class="animBallBox">
		<div class="animBall"></div>
	</div>
</div>

.animBallBoxという大きさが固定された箱の中に、.animBallという動かす丸を入れます。

jQuery

$(function() {
	$('.animBallBox').hover(
		function(){  
			$('.animBall').addClass('animation');
		},
		function(){
			$('.animBall').removeClass('animation');
		}
	);
})

CSS

.box {
	width: 200px;
	height: 200px;
	position: relative;
}
.animBall {
	width: 60px;
	height: 60px;
	background-image: url(../images/sample.png);
	background-size: 100% 100%;
}
.animBallBox {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin-top: -30px;
	margin-left: -30px;
}
.animation {
	animation: animScale 0.4s ease-out;
	transform-origin: 50% 50%;
	-webkit-animation: animScale 0.4s ease-out;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: animScale 0.4s ease-out;
	-moz-transform-origin: 50% 50%;
}
@keyframes animScale {
	0% { transform: scale(0.8, 0.8); }
	40% { transform: scale(1.2, 1.2); }
	60% { transform: scale(1, 1); }
	80% { transform: scale(1.1, 1.1); }
	100% { transform: scale(1, 1); }
}
@-webkit-keyframes animScale {
	0% { -webkit-transform: scale(0.8, 0.8); }
	40% { -webkit-transform: scale(1.2, 1.2); }
	60% { -webkit-transform: scale(1, 1); }
	80% { -webkit-transform: scale(1.1, 1.1); }
	100% { -webkit-transform: scale(1, 1); }
}
@-moz-keyframes animScale {
	0% { -moz-transform: scale(0.8, 0.8); }
	40% { -moz-transform: scale(1.2, 1.2); }
	60% { -moz-transform: scale(1, 1); }
	80% { -moz-transform: scale(1.1, 1.1); }
	100% { -moz-transform: scale(1, 1); }
}

間違っている点などありましたら、ご指摘ください。

DEMO
別ウィンドウで開く

上の丸にマウスオーバーしてみてください。
ぽよんっ！

では、さっそく作り方です。
まずは動かす画像を用意します。
今回はこの丸をぽよんっ！とさせます。

HTML

<div class="box">
<div class="animBall"></div>
</div>

div.boxは真ん中に表示させるために
囲んでいるだけなので必須ではないです。
div.animBallが今回動かすボールを入れる箱となります。

CSS

.box {
	width: 200px;
	height: 200px;
	position: relative;
}
.animBall {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -30px;
	width: 60px;
	height: 60px;
	background-image: url(../images/sample.png);
	background-size: 100% 100%;
}
// マウスオーバーしたときの動作
.animBall:hover {
	animation: animScale 0.4s ease-out;
	transform-origin: 50% 50%;
	-webkit-animation: animScale 0.4s ease-out;
	-webkit-transform-origin: 50% 50%;
	-moz-animation: animScale 0.4s ease-out;
	-moz-transform-origin: 50% 50%;
}
@keyframes animScale {
	0% { transform: scale(0.8, 0.8); }
	40% { transform: scale(1.2, 1.2); }
	60% { transform: scale(1, 1); }
	80% { transform: scale(1.1, 1.1); }
	100% { transform: scale(1, 1); }
}
@-webkit-keyframes animScale {
	0% { -webkit-transform: scale(0.8, 0.8); }
	40% { -webkit-transform: scale(1.2, 1.2); }
	60% { -webkit-transform: scale(1, 1); }
	80% { -webkit-transform: scale(1.1, 1.1); }
	100% { -webkit-transform: scale(1, 1); }
}
@-moz-keyframes animScale {
	0% { -moz-transform: scale(0.8, 0.8); }
	40% { -moz-transform: scale(1.2, 1.2); }
	60% { -moz-transform: scale(1, 1); }
	80% { -moz-transform: scale(1.1, 1.1); }
	100% { -moz-transform: scale(1, 1); }
}

ベンダープレフィックス ((-webkit-や-moz-など拡張機能であることを明示するための識別子)) のせいで、長くて少しうわーってなってしまいそうなので、ラフに少しだけ解説をしてみます。

animation: animScale 0.4s ease-out;
ここには、アニメーションをどんな風にしてほしいか書いてあります。
今回の場合は、
「animScaleっていうのを使って、0.4秒間で実行してね！動きはease-outな感じでお願いします！」
と注文しています。

「そんなこと言われても、animScaleって何なのサ？」ということで、
@keyframes animScale
の中に、動きを書いていきます。

見た目から想像出来るかと思いますが、
0%, 40%, …というのは、先ほど指定した時間（今回は0.4s）× n％後の状態を表しています。
（ex: 0.4s × 40%(0.4) = 0.16s）
その指定した時間における状態をCSSで書いてあげると、それに間に合うように「あっ大きくならなきゃ！」「今度は小さく！！」というようにぽよぽよします。

ぽよぽよアニメーションさせしたいときは、ぜひ使ってみてください。
何か間違っている点などありましたら、ご指摘ください！

こちらを参考にさせていだきました。

CSS3アニメーションで心地良いモーションを作る｜1 pixel｜サイバーエージェント公式クリエイターズブログ