===========================================================================
HoverとSelectの役割の分類
---------------------------------------------------------------------------
[1] Loop型
Hoverでは、animationをloopさせて、Selectした時は、マークをつける。

[2] Preview型
Hoverで起きるanimationはSelectして起きるanimationの初期の動き(preview)になる。
===========================================================================


===========================================================================
Preview型におけるHover(animation)とSelect(transition)の役割
---------------------------------------------------------------------------
Preview型で、Hoverをanimation、Selectをtransitionで行った場合、
厄介な問題点がでてくる。

すでにselectされているボタンをクリックして、unselectした時に、transitionの逆動作では
なく、Hoverのanimationが動作してしまうのである。

これを解決するのに、以下のように「animation-iteration-count:0;」を使う。
（なぜうまくいくのか理由はわかっていない）

厳密にいうと、マウスがボタン上に乗ってあと間髪いれずにunselectすると、
Hoverのanimationが干渉するようである。
マウスがボタン上に乗ってあと１秒くらい待ってからunselectした場合は、
Hoverのanimationが干渉しない。
---------------------------------------------------------------------------
tpl-slide
---------------------------------------------------------------------------
/* slide:board */
<?php $this->csss("board"); ?> {
	position:absolute;
	top:0;
	left:0;
	width:200%;
	height:100%;
	background:blue;
	transition:left 1.0s;
}
<?php $this->csss("board","h"); ?> {
	animation-name:<?php $this->kfn("board-on-hover"); ?>;
	animation-iteration-count:1;
	animation-duration:.8s;
}
@keyframes <?php $this->kfn("board-on-hover"); ?> {
	0% {
		left:0;
		animation-timing-function:linear;
	}
	20% {
		left:-50%;
		animation-timing-function:ease-out;
	}
}
<?php $this->csss("board","s"); ?> {
	animation-iteration-count:0;
	left:-100%;
}
===========================================================================