CSS部分

@-webkit-keyframes anime-doki{
	0%{-webkit-transform: scale(0.8)}
	20%{-webkit-transform: scale(1.2)}
	40%{-webkit-transform: scale(0.8)}
	60%{-webkit-transform: scale(1.2)}
	80%{-webkit-transform: scale(0.8)}
	100%{-webkit-transform: scale(0.8)}
}

Webkit用にアニメーション名（anime-doki）を含めてKeyframesを定義します。
また各%は、1アニメーションを100%とした場合に、どのような処理をするかを定義しています。
今回の場合は、拡大率（scale）を変更するように定義します。

.blink_doki_08{
	position: absolute;
	-webkit-animation-name: anime-doki;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: infinite;
}

webkit-animation-nameでアニメーション名を指定し、-webkit-animation-durationで再生する速度を決めます。

durationの単位は秒です。

webkit-animation-iteration-countでは、infiniteを指定し無限に繰り返すようになります。

サンプルHTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>sample</title>
	<style type="text/css">
		@-webkit-keyframes anime-doki{
			0%{-webkit-transform: scale(0.8)}
			20%{-webkit-transform: scale(1.2)}
			40%{-webkit-transform: scale(0.8)}
			60%{-webkit-transform: scale(1.2)}
			80%{-webkit-transform: scale(0.8)}
			100%{-webkit-transform: scale(0.8)}
		}
		.blink_doki_08{
			color: #ff3e9e;
			font-size: 50px;
			position: absolute;
			-webkit-animation-name: anime-doki;
			-webkit-animation-duration: 0.8s;
			-webkit-animation-iteration-count: infinite;
		}
		.blink_doki_12{
			color: #ff3e9e;
			font-size: 50px;
			position: absolute;
			-webkit-animation-name: anime-doki;
			-webkit-animation-duration: 1.2s;
			-webkit-animation-iteration-count: infinite;
		}
		.blink_doki_18{
			color: #ff3e9e;
			font-size: 50px;
			position: absolute;
			-webkit-animation-name: anime-doki;
			-webkit-animation-duration: 1.8s;
			-webkit-animation-iteration-count: infinite;
		}
	</style>
</head>
<body style="padding:10px;">
0.8Sec:<span class="blink_doki_08">&#10084;</span>
<div style="padding:20px;"></div>
1.2Sec:<span class="blink_doki_12">&#10084;</span>
<div style="padding:20px;"></div>
1.8Sec:<span class="blink_doki_18">&#10084;</span>
</body>
</html>