マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。
例えばFacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、様々なケースで使用されています。しかし、多様なマイクロインタラクションを1から自作するのは大変手間がかかるものです。
本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無料で利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作に是非ご活用ください。
「メニュー」と「閉じる」アイコンの変形アニメーション
3本線で表現されている「メニュー」アイコンが、「✕」アイコンに変化するアニメーションです。マウスを乗せると線が変形し、「✕」アイコンへと変化します。
上下の線を回転させて対角線を作り、真ん中の線を少し回転させながら消しています。上下の線をそのままの斜線にしてしまうと、元のアイコンより大きめのサイズ感になってしまうため、若干線を短くして調整しています。
<div class="menu"> <span class="menu-line"></span> <span class="menu-inner"></span> </div>
.menu {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
cursor: pointer;
}
.menu-line {
top: 17px;
}
.menu-inner::after,
.menu-inner::before {
content: "";
}
.menu-line,
.menu-inner::after,
.menu-inner::before {
position: absolute;
display: block;
width: 100%;
height: 2px;
transition: .15s ease-out;
background-color: #fff;
}
.menu-inner::after {
top: 34px;
}
/* 真ん中の線のアニメーション */
.menu:hover .menu-line {
width: 0;
opacity: 0;
transform: translateX(20px) rotate(90deg);
}
/* 上の線のアニメーション */
.menu:hover .menu-inner::before {
width: 44px;
transform: translateY(17px) translateX(3px) rotate(-135deg);
}
/* 下の線のアニメーション */
.menu:hover .menu-inner::after {
width: 44px;
transform: translateY(-17px) translateX(3px) rotate(135deg);
}円形ボタンのホバーアニメーション
中心にアイコンがある、円形ボタンのホバーアニメーションです。ハートが回転しながら色が変わり、背景の円は透過しながら回転する点線へと変化します。
ハートの回転はtransformのrotate3dを使って、奥行きのある自然な回転を表現しています。円の回転はtransitionではなくanimationを使い、オプションにinfiniteを設定することで永続的なアニメーションを実現しています。
<div class="btn">
<div class="btn-back">
<span class="btn-back-inner"></span>
</div>
<span class="btn-heart">♥</span>
</div>.btn {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
cursor: pointer;
}
.btn-heart {
position: absolute;
color: #f78198;
top: 16px;
left: 16px;
font-size: 1.8rem;
line-height: 2rem;
transform: scaleY(0.8);
transition: .35s ease-in-out;
}
.btn-back {
width: 100%;
height: 100%;
animation: rotation 4s infinite linear;
}
.btn-back-inner {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
transition: .15s ease-out;
}
/* ハートのアニメーション */
.btn:hover .btn-heart {
color: #fff;
transform: rotate3d(0, -1, 0, 180deg) scale(1.2, 0.9);
}
/* 背景のアニメーション */
.btn:hover .btn-back-inner {
border: 1px dashed #fff;
background-color: rgba(255, 255, 255, 0);
transform: scale(1.3);
}
/* 円の回転アニメーション */
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}チェックマークのアニメーション
チェックマークが描かれるアニメーションです。線で円を描き、その後背景を塗り潰しながらチェックマークが現れます。
線を描くアニメーションは、背景と同じ色の矩形を上に重ねて線を隠し、線が徐々に見えるように矩形を回転させて表現しています。塗られる動きは内側に向かって線を太くすることで表現していますが、borderでは外向きにしか線が描けないためbox-shadowで代用しています。
<div class="circle"> <span class="cover1"></span> <span class="cover2"></span> <span class="check">✓</span> </div>
.circle {
position: relative;
border-radius: 50%;
width: 80px;
height: 80px;
box-shadow: inset 0 0 0 2px #fff;
animation: filling .2s 1 ease-in .8s forwards;
}
.cover1,
.cover2 {
position: absolute;
overflow: hidden;
width: 50%;
height: 100%;
}
.cover1 {
left: 50%;
}
.cover1:before,
.cover2:before {
position: absolute;
content: "";
}
.cover1:before {
width: 100%;
height: 200%;
background: #7496ea; /* 背景色に合わせて変更してください */
transform-origin: 0 25%;
animation: draw .3s 1 linear forwards;
}
.cover2:before {
left: -10%;
width: 110%;
height: 120%;
background: #7393ea; /* 背景色に合わせて変更してください */
transform-origin: 100% 40%;
animation: draw .3s 1 ease-out .3s forwards;
}
.check {
position: absolute;
color: #7393ea;
width: 100%;
font-size: 3rem;
line-height: 2rem;
text-align: center;
top: 26px;
opacity: 0;
animation: check .2s 1 ease-in-out .9s forwards;
}
/* 円を描くアニメーション */
@keyframes draw {
0% { transform: rotate(0deg); }
100% { transform: rotate(180deg); }
}
/* 塗りのアニメーション */
@keyframes filling {
0% { box-shadow: inset 0 0 0 9px #fff; }
100% { box-shadow: inset 0 0 0 50px #fff; }
}
/* チェックマークのアニメーション */
@keyframes check {
0% { transform: scale(0.5) rotate(30deg); opacity: 0; }
90% { transform: scale(1.3) rotate(-15deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}揺れるローディングアイコン
「LOADING」の文字の回りを、不規則な形の背景がゆらゆらと回転するローディングアイコンです。
ゆらめく表現は、正円を少し変形させて楕円形にし、さらに変形点を中心から若干ずらした状態で回転させます。それを3つ重ねてそれぞれ違う速度で回転させると、不規則で揺れているような動きが実現できます。「LOADING」の点滅は、animationと@keyframesを使って透明度を連続して変化させています。透明度が不規則な変化になるように値を設定するのが、味のある点滅にするポイントです。
<div class="loading"> <span class="title">LOADING</span> <span class="circle1"></span> <span class="circle2"></span> <span class="circle3"></span> </div>
.loading {
position: relative;
width: 100px;
height: 100px;
}
.loading::after {
border-radius: 40%;
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #ee88aa, rgba(250, 238, 255, 0.3) 90%, rgba(230, 238, 255, 0.5));
animation: color-fade 3s infinite linear;
}
.circle1,
.circle2,
.circle3 {
opacity: .4;
position: absolute;
background: #0af;
width: 100px;
height: 100px;
transform-origin: 50% 47%;
border-radius: 40%;
animation: rotation 3s infinite linear;
}
.circle2 {
opacity: .2;
background: #ff0;
animation: rotation 5s infinite linear;
}
.circle3 {
animation: rotation 2.5s infinite linear;
}
.title {
position: absolute;
top: 33px;
width: 100%;
z-index: 1;
color: #fff;
text-align: center;
font-size: .7rem;
line-height: 2rem;
letter-spacing: .15em;
animation: text-fade 300ms infinite linear;
}
/* 回転アニメーション */
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ピンク色の背景のアニメーション */
@keyframes color-fade {
0% { opacity: 1; }
50% { opacity: .7; }
}
/* 点滅のアニメーション */
@keyframes text-fade {
0% { opacity: 1; }
25% { opacity: .8; }
50% { opacity: .9; }
75% { opacity: .6; }
}まとめ
近年Webサイトやアプリケーションの制作には、マイクロインタラクションは不可欠なものとなっています。今回は簡単に導入できる形で紹介しましたが、コピペで使うだけでなく、ロジックを理解すると知らなかったテクニックなど新しい発見もあると思いますので、ぜひソースコードもご覧ください。
またアニメーション作成自体に興味のる方は、記事「あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック」にて役立つテクニックを紹介していますので、こちらもご覧ください。
紹介したデモとソースコードは以下からまとめて確認できますので、ご参考ください。
