などの疑問や悩みを解決してまいります。
ふわふわした動きは正直頻繁に使われるものではありませんが、デザインによってはユーザーに視覚的好印象なアニメーションとなります。
もちらんJSは不要でHTMLとCSSのみ使用していきますので、JSが苦手な方も簡単に実装ができます。
今回はHTMLとCSSのみ使用してふわふわしたアニメーションの実装方法を解説していきます。
完成例を見てみましょう
以下がふわふわアニメーションを実装した完成例です。
See the Pen ふわふわアニメーション by koutarou mori (@koutarou-mori) on CodePen.
このように縦にふわふわ、横にふわふわのアニメーションを実装しました。
上下左右に動く幅やスピードはお好みで調整していただけたらと思います。
それではコードを解説していきます。
HTMLコードの解説
使用したHTMLコードは以下です。
<div class="element fuwafuwa01">縦にふわふわ</div>
<div class="element fuwafuwa02">横にふわふわ</div>今回はfuwafuwa01クラスとfuwafuwa02クラスをふわふわアニメーション用として使用しています。
なのでふわふわさせたい要素のクラスに指定することでアニメーションを実装することができます。
このクラスにふわふわアニメーションのCSSを指定していきます。
CSSコードの解説
使用したCSSコードは以下になります。
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 60px;
height: 100vh;
margin: 0;
}
.element {
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 100%;
}
/* ふわふわアニメーションここから */
/* 縦のふわふわ指定 */
.fuwafuwa01 {
animation: fuwafuwa01 2s infinite ease-in-out;
}
/* 横のふわふわ指定 */
.fuwafuwa02 {
animation: fuwafuwa02 2s infinite ease-in-out;
}
/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(30px);
}
}
/* 横のふわふわの動き */
@keyframes fuwafuwa02 {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(30px);
}
}
/* ふわふわアニメーションここまで */bodyタグとelementクラスに指定しているCSSはレイアウトに関するものなどで無視していただいて大丈夫です。
今回着目していただきたいCSSコードは以下になります。
/* ふわふわアニメーションここから */
/* 縦のふわふわ指定 */
.fuwafuwa01 {
animation: fuwafuwa01 2s infinite ease-in-out;
}
/* 横のふわふわ指定 */
.fuwafuwa02 {
animation: fuwafuwa02 2s infinite ease-in-out;
}
/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(30px);
}
}
/* 横のふわふわの動き */
@keyframes fuwafuwa02 {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(30px);
}
}
/* ふわふわアニメーションここまで */これらのコードについて解説していきます。
animationプロパティを使用してアニメーションの設定を一括指定する
/* ふわふわアニメーションここから */
/* 縦のふわふわ指定 */
.fuwafuwa01 {
animation: fuwafuwa01 2s infinite ease-in-out;
}
/* 横のふわふわ指定 */
.fuwafuwa02 {
animation: fuwafuwa02 2s infinite ease-in-out;
}上記の箇所のコードは、アニメーションの内容を設定するのにanimationプロパティで一括指定しています。
今回一括で指定している内容は、アニメーションの名前、再生時間、再生回数、再生の変化する速度の設定を行っています。
animationプロパティは以下のように一括指定することが可能です。
animation: ①name ②duration ③timing ④delay ⑤iteration ⑥direction ⑦fill ⑧play;また一括指定しない場合は以下のように記述することで同じ内容になります。
/* 一括指定 */
animation: fuwafuwa01 2s infinite ease-in-out;
/* 一括指定の内容と同じ */
animation-name: fuwafuwa01; /* アニメーションの名前 */
animation-duration: 2s; /* アニメーションの再生時間 */
animation-iteration-count: infinite; /* アニメーションの再生回数 */
animation-timing-function: ease-in-out; /* アニメーションが変化する速度 */
それぞれのアニメーションに関するCSSは以下の記事でも解説しています。
-
-
【CSSアニメーション】@keyframesとanimationプロパティについて解説します。
続きを見る
さて、記述の内容に戻りますが今回は縦のアニメーションと横のアニメーションの2つ用意していますので、animationプロパティも2つ用意しています。
今回は縦のアニメーションがfuwafuwa01、横のアニメーションがfuwafuwa02を指定しています。
どちらも再生時間は2秒、再生回数はinfinite（無制限）、変化する速度はease-in-out（加速して減速）を指定しています。
縦のふわふわにはtranslateY()関数、横のふわふわにはtranslateX()関数を指定
次に@keyframesの中身について解説していきます。
縦のふわふわ、横のふわふわはそれぞれtranslate()関数を使用して要素を動かしています。
/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(30px);
}
}
/* 横のふわふわの動き */
@keyframes fuwafuwa02 {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(30px);
}
}縦の動きにはtranslateY()関数、横の動きにはtranslateX()関数を指定しています。
それぞれ始まりと終わりには元の位置にあってほしいので、0%と100%には引数に「0」を指定しています。
そして今回は30pxほどの動きをつけたかったのでtranslateY()関数、translateX()関数の引数に「30px」を指定しています。
本記事のまとめ
今回はふわふわアニメーションの実装方法について解説しました。
ポイント
animationプロパティでアニメーションの名前、再生時間、再生回数、再生の変化する速度を指定する- 縦の動きは
translateY()関数、横の動きにはtranslateX()関数を指定する - 始まりと終わりには元の位置にあってほしいので、0%と100%には引数に「0」を指定
冒頭でもお伝えしましたが、頻繁に使用することはあまりないアニメーションではありますが、デザインによってはユーザーにとって好印象を与えてくれます。
本記事で解説したようにHTMLとCSSだけで実装することができるので、ぜひ試してみてください！
ここまで読んでいただきありがとうございました。
