こんにちは。
[CSS/HTML]CSSだけで、まなちゃん（ねこ）を作って動かす 〜作る編〜 - Qiita
の記事の動かす編。
前回はまなちゃんへの愛とまなちゃんをCSSで作るところまで説明した。
ちなみに出来上がった動くまなちゃんはこれ。
See the Pen manachan by himeka223 (@himeka223) on CodePen.
今回はまなちゃんの動きについて説明する。
まなちゃん結構動いてるけど、実はそんなに複雑ではないのだ。
説明していく
CSSアニメーションの基本
簡単にいうと
-
@keyframesで動き（アニメーション）を指定 -
animationプロパティで、@keyframesを指定
まなちゃんの動きに統一感を
まなちゃんのパーツの動きに統一感をだしたいため、
顔自体の揺れる動き以外（耳・目・鼻(ω)・ひげ）は、
@keyframesでは30%で動かす- アニメーションのスピードを5秒、ループ数を無限に設定
animation: {keyframes名} 5s(秒数) infinite(無限ループ);
耳の動き
耳を倒してなでてもらう場所を確保するまなちゃんを表現
@keyframes ear-l {
0%{
transform: rotate(0deg);
}
30% {
transform: rotate(-45deg);
}
100%{
transform: rotate(0deg);
}
}
@keyframes ear-r {
0%{
transform: rotate(0deg);
}
30% {
transform: rotate(45deg);
}
100%{
transform: rotate(0deg);
}
}
回転してない耳
↓
45°角度がついた耳
↓
回転してない耳
rotateは要素を回転させる指定である。
rotate(45deg)は右に45°回転するという指定になる。
要素を回転させることで、耳を倒すことを表現した。
目の動き
目を閉じることで、まなちゃんの感情の高ぶりを表現
@keyframes eye {
0%{
height: 20px;
}
30% {
height: 5px;
}
100%{
height: 20px;
}
}
高さ20pxの目
↓
高さ5pxの目
↓
高さ20pxの目
heightは高さを指定している。
まなちゃんの目のサイズの高さはもともと20pxなので、
それを5pxにして細くする。
これで目を閉じる動きができる。
「ω」の動き
口を開けて、喜びを伝えようとするまなちゃんを表現
@keyframes nouse {
0%{
height: 50px;
}
30% {
height: 25px;
}
100%{
height: 50px;
}
}
「ω」の部分は、疑似要素afterとbeforeで表示しているので、
そこにanimationは指定する。
高さ50pxの「ω」
↓
高さ25pxの「ω」
↓
高さ50pxの「ω」
目と同じように、もともと50pxの高さの「ω」を25pxに細くする。
細くし、下にある口を見せることで
口が開いたように表現している。
ひげの動き
まばらなおひげの角度を変えることで、こっちに来るまなちゃんを表現
@keyframes beard-l {
30% {
transform: rotate(-1deg);
}
}
@keyframes beard-r {
30% {
transform: rotate(1deg);
}
}
0%と100%の指定がないのは、静止状態で、要素自体にrotateで角度を指定してるため
3本それぞれの角度
↓
3本すべての角度を1°に
↓
3本それぞれの角度
rotateで回転の指定を1°だけつける。
顔全体の動き
揺れながらこっちに向かってくる、ごきげんなまなちゃんを表現
@keyframes hurueru {
0% {transform: translate(0px, 0px) rotate(0deg) scale(1)}
30% {transform: translate(2px, 2px) rotate(2deg) scale(0.95)}
50% {transform: translate(0px, 2px) rotate(0deg) scale(0.95)}
75% {transform: translate(2px, 0px) rotate(-1deg) scale(1)}
100% {transform: translate(0px, 0px) rotate(0deg) scale(1)}
}
耳・目・鼻(ω)・ひげより、少し細かく動きの指定をする。
transformプロパティは空白で区切り複数の変化をつけることが出来る。
translate
要素の位置を指定する。指定方法は
({縦方向に移動させるpx},{横方向に移動させるpx})
のような感じ。
rotate
おなじみの要素を回転させる角度を指定する。
scale
要素の大きさを倍率で指定する。
元の位置で、角度もなく、大きさもそのまま
↓
下に2px、右に2px移動、右に2°回転、大きさを95%
↓
縦方向は元の位置に、右に2px移動したまま、回転を戻す、大きさを95%
↓
下に2px、横方向は元の位置に、左に1°回転、大きさを戻す
↓
元の位置で、角度もなく、大きさもそのまま
まとめ
まなちゃんを動かしてみて、CSSアニメーションについて前より理解できた。
意外に複雑な動きをつけなくても、まなちゃんの愛らしい姿を表現できてとても嬉しい。
