マウスホバーで一文字ずつ回転する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」を指定する必要があります。