マウスホバーで一文字ずつ回転するCSSアニメーションサンプル

CSS アニメーション サンプル集,CSS

マウスホバーで一文字ずつ回転するCSSアニメーションサンプル

マウスホバーでテキストが一文字ずつ回転するCSSアニメーションの紹介です。

See the Pen CSS | scroll-snap-type: y mandatory by yochans (@yochans) on CodePen.

マウスホバーで一文字ずつ回転させる

テキスト上をマウスホバー際に、一文字ずつ回転させたい場合のサンプルコードです。

CSSではn文字目という指定はできませんので、各文字を<span>で記述する必要があります。

<div class="container">
	<p class="text">
		<span>O</span><span>N</span><span>E</span> <span>N</span><span>O</span><span>T</span><span>E</span><span>S</span>
	</p>
</div>

<span>のマウスホバー時にアニメーションを指定しています。

.text{
	padding: 30px 0;
	font-size: 80px;
	font-weight: bold;
	color: #4169e1;
	line-height:0;
}

.text span{
	display: inline-block;
}


.text span:hover{
	animation: rotation_anim 1s linear infinite;
}

@keyframes rotation_anim {
	100% {
		transform: rotatey(360deg);
	}
}

<span>にdisplayプロパティで「inline-block」を指定します。

※「:hover」側で指定するとフォントによっては回転時にwidthが広がりカクつく原因になります。

.text span{
	display: inline-block;
}

<span>のマウスホバー時にアニメーションを指定します。

好みもあると思いますが、animation-timing-functionには「linear」を指定して一定の回転速度にしています。

.text span:hover{
	animation: rotation_anim 1s linear infinite;
}

アニメーション@keyframesには単純に一回転するように100%で360degを指定。

360deg以上も指定可能で、例えば3600degを指定すれば指定したアニメーション時間内に10回転します。

@keyframes rotation_anim {
	100% {
		transform: rotatey(360deg);
	}
}

spanにtransformが効かない場合

サンプルではspanに対して、アニメーションを指定してtransformプロパティで回転させていますが、上記の通りdisplayプロパティで「inline-block」を指定する必要があります。

これは<span>のデフォルト値が「inline」ですので、「inline-block」に変更しておかないと要素のwidthやheightがなく、拡大・縮小・回転などなどtransformプロパティが効かない、ということです。

また、<p>タグで一文字ずつ指定した場合は、displayプロパティのデフォルト値が「block」ですので、目的の挙動が得られない場合は同様に「inline-block」を指定する必要があります。