大御所のアイコンライブラリFont Awesomeのアニメーション機能は、CSSのクラスを追加するだけで動きを与えられ、お手軽です。動きのオプションも指定が可能です。
このアニメーション機能をGoogleのMaterial Symbols & Iconsに移植してみたいと思い、やってみましたので共有します。
公開されているMaterial Symbols & Iconsと、Font Awesomeのコード（GitHub）を一部拝借しました。
アニメーションのCSSを取り込む
まず、Google Fonts（ウェブフォント）の読み込みをlinkタグで記述します。今回はFill（塗りつぶし）のスタイルとしました。
そして、アニメーションのCSSを収める「style.css」を呼び出すlinkタグも記述します。
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
<link rel="stylesheet" href="style.css">Font AwesomeのCSSからアニメーションの動き部分を取り出してstyle.cssとして保存します。
先頭部分には、各アイコンのサイズなどのスタイルを共通設定として指定します。
/*
* 共通設定
*/
.material-symbols-outlined[class*="fa-"] {
display: inline-block;
line-height: 1;
font-size: 52px;
padding: 16px;
color:oklch(37.2% 0.044 257.287);
}
/*
* Font Awesomeアニメーション
*/
.fa-beat {
animation-name: fa-beat;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-bounce {
animation-name: fa-bounce;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
}
.fa-fade {
animation-name: fa-fade;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-beat-fade {
animation-name: fa-beat-fade;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-flip {
animation-name: fa-flip;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1.5s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-flip-360 {
animation-name: fa-flip-360;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-shake {
animation-name: fa-shake;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 0.75s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
}
.fa-spin {
animation-name: fa-spin;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 2s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-spin-reverse {
--fa-animation-direction: reverse;
}
.fa-pulse,
.fa-spin-pulse {
animation-name: fa-spin;
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, steps(8));
}
.fa-spin-snap {
animation-name: fa-spin-snap;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 3s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-spin-snap-4 {
animation-name: fa-spin-snap-4;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 2.4s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-spin-snap-8 {
animation-name: fa-spin-snap-8;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 4s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-buzz {
animation-name: fa-buzz;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 0.6s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, linear);
}
.fa-wag {
animation-name: fa-wag;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 0.9s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-out);
transform-origin: bottom center;
}
.fa-float {
animation-name: fa-float;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 3s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-in-out);
will-change: transform;
}
.fa-swing {
animation-name: fa-swing;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 1.2s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-out);
transform-origin: top center;
}
.fa-jello {
animation-name: fa-jello;
animation-delay: var(--fa-animation-delay, 0s);
animation-direction: var(--fa-animation-direction, normal);
animation-duration: var(--fa-animation-duration, 0.9s);
animation-iteration-count: var(--fa-animation-iteration-count, infinite);
animation-timing-function: var(--fa-animation-timing, ease-out);
}
@media (prefers-reduced-motion: reduce) {
.fa-beat,
.fa-bounce,
.fa-fade,
.fa-beat-fade,
.fa-flip,
.fa-flip-360,
.fa-pulse,
.fa-shake,
.fa-spin,
.fa-spin-pulse,
.fa-buzz,
.fa-float,
.fa-jello,
.fa-spin-snap,
.fa-spin-snap-4,
.fa-spin-snap-8,
.fa-swing,
.fa-wag {
animation: none !important;
transition: none !important;
}
}
@keyframes fa-beat {
0% {
transform: scale(1);
}
25% {
transform: scale(calc(1.25 * var(--fa-beat-scale, 1.25)));
}
45% {
transform: scale(calc(1.22 * var(--fa-beat-scale, 1.22)));
}
65% {
transform: scale(calc(1.25 * var(--fa-beat-scale, 1.25)));
}
90% {
transform: scale(1);
}
}
@keyframes fa-bounce {
0% {
transform: scale(1, 1) translateY(0);
animation-timing-function: var(--fa-animation-timing);
}
14% {
transform: scale(var(--fa-bounce-start-scale-x, 1.06), var(--fa-bounce-start-scale-y, 0.94)) translateY(var(--fa-bounce-anticipation, 3px));
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
}
32% {
transform: scale(var(--fa-bounce-jump-scale-x, 0.94), var(--fa-bounce-jump-scale-y, 1.12)) translateY(calc(-1 * var(--fa-bounce-height, 0.5em)));
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
52% {
transform: scale(1, 1) translateY(calc(-1 * var(--fa-bounce-height, 0.5em) * 1.1));
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
70% {
transform: scale(var(--fa-bounce-land-scale-x, 1.06), var(--fa-bounce-land-scale-y, 0.92)) translateY(0);
animation-timing-function: cubic-bezier(0.33, 0.33, 0.66, 1);
}
85% {
transform: scale(0.98, 1.04) translateY(calc(-2px * var(--fa-bounce-rebound, 1)));
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
}
100% {
transform: scale(1, 1) translateY(0);
}
}
@keyframes fa-fade {
0% {
opacity: 1;
transform: scale(1);
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
}
40% {
opacity: var(--fa-fade-opacity, 0.4);
transform: scale(0.98);
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes fa-beat-fade {
0% {
opacity: var(--fa-beat-fade-opacity, 0.4);
transform: scale(1);
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
}
25% {
opacity: calc(var(--fa-beat-fade-opacity, 0.4) + 0.4);
transform: scale(var(--fa-beat-fade-scale, 1.28));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
45% {
opacity: 1;
transform: scale(var(--fa-beat-fade-scale, 1.25));
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
65% {
opacity: calc(var(--fa-beat-fade-opacity, 0.4) + 0.4);
transform: scale(var(--fa-beat-fade-scale, 1.28));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
100% {
opacity: var(--fa-beat-fade-opacity, 0.4);
transform: scale(1);
}
}
@keyframes fa-flip {
0% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
}
8% {
transform: perspective(2em) scale(var(--fa-flip-anticipation-scale, 0.95)) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
}
35% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * 0.6));
animation-timing-function: linear;
}
65% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * 0.5));
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
92% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * var(--fa-flip-overshoot, 1.04)));
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
}
100% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -360deg));
}
}
@keyframes fa-flip-360 {
0% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
}
8% {
transform: perspective(2em) scale(var(--fa-flip-anticipation-scale, 0.95)) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), 0deg);
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
}
50% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * 0.6));
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
80% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), calc(var(--fa-flip-angle, -360deg) * var(--fa-flip-overshoot, 1.04)));
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
}
100% {
transform: perspective(2em) scale(1) rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -360deg));
}
}
@keyframes fa-shake {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}
8% {
transform: rotate(35deg) translateX(1px);
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
20% {
transform: rotate(-22deg) translateX(-1px);
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
35% {
transform: rotate(15deg) translateX(1px);
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
50% {
transform: rotate(-9deg);
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
65% {
transform: rotate(5deg);
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
78% {
transform: rotate(-3deg);
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
90% {
transform: rotate(1deg);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fa-spin-snap {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
12% {
transform: rotate(60deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
16.67% {
transform: rotate(60deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
28.67% {
transform: rotate(120deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
33.33% {
transform: rotate(120deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
45.33% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
62% {
transform: rotate(240deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
66.67% {
transform: rotate(240deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
78.67% {
transform: rotate(300deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
83.33% {
transform: rotate(300deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
95.33% {
transform: rotate(360deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fa-spin-snap-4 {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
15% {
transform: rotate(90deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
25% {
transform: rotate(90deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
40% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
65% {
transform: rotate(270deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
75% {
transform: rotate(270deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
90% {
transform: rotate(360deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fa-spin-snap-8 {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
9% {
transform: rotate(45deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
12.5% {
transform: rotate(45deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
21.5% {
transform: rotate(90deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
25% {
transform: rotate(90deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
34% {
transform: rotate(135deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
37.5% {
transform: rotate(135deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
46.5% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: rotate(180deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
59% {
transform: rotate(225deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
62.5% {
transform: rotate(225deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
71.5% {
transform: rotate(270deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
75% {
transform: rotate(270deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
84% {
transform: rotate(315deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
87.5% {
transform: rotate(315deg);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
96.5% {
transform: rotate(360deg);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fa-buzz {
0% {
transform: translateX(0) rotate(0deg);
animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
}
5% {
transform: translateX(var(--fa-buzz-distance, 4px)) rotate(0.5deg);
}
10% {
transform: translateX(calc(-1 * var(--fa-buzz-distance, 4px))) rotate(-0.5deg);
}
15% {
transform: translateX(var(--fa-buzz-distance, 4px)) rotate(0.3deg);
}
20% {
transform: translateX(calc(-1 * var(--fa-buzz-distance, 4px))) rotate(-0.3deg);
}
25% {
transform: translateX(calc(var(--fa-buzz-distance, 4px) * 0.7)) rotate(0.2deg);
}
30% {
transform: translateX(calc(-1 * var(--fa-buzz-distance, 4px) * 0.7)) rotate(-0.2deg);
}
35% {
transform: translateX(calc(var(--fa-buzz-distance, 4px) * 0.4)) rotate(0.1deg);
}
40% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(0) rotate(0deg);
}
}
@keyframes fa-wag {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
}
12% {
transform: rotate(var(--fa-wag-angle, 12deg));
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
24% {
transform: rotate(2deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
}
36% {
transform: rotate(calc(var(--fa-wag-angle, 12deg) * 0.85));
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
48% {
transform: rotate(1deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
}
58% {
transform: rotate(calc(var(--fa-wag-angle, 12deg) * 0.6));
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
68% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fa-float {
0% {
transform: translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x, 1.02), var(--fa-float-squash-y, 0.98));
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
}
15% {
transform: translateY(calc(-0.4 * var(--fa-float-height, 6px))) translateX(var(--fa-float-drift, 1px)) rotate(var(--fa-float-tilt, 1deg)) scale(1, 1);
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
35% {
transform: translateY(calc(-1 * var(--fa-float-height, 6px))) translateX(0) rotate(0deg) scale(var(--fa-float-stretch-x, 0.98), var(--fa-float-stretch-y, 1.03));
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);
}
50% {
transform: translateY(calc(-0.92 * var(--fa-float-height, 6px))) translateX(calc(-0.5 * var(--fa-float-drift, 1px))) rotate(calc(-0.5 * var(--fa-float-tilt, 1deg))) scale(0.995, 1.01);
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
}
70% {
transform: translateY(calc(-0.3 * var(--fa-float-height, 6px))) translateX(calc(-1 * var(--fa-float-drift, 1px))) rotate(calc(-1 * var(--fa-float-tilt, 1deg))) scale(1, 1);
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
}
90% {
transform: translateY(calc(0.05 * var(--fa-float-height, 6px))) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x, 1.02), var(--fa-float-squash-y, 0.98));
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
}
100% {
transform: translateY(0) translateX(0) rotate(0deg) scale(var(--fa-float-squash-x, 1.02), var(--fa-float-squash-y, 0.98));
}
}
@keyframes fa-swing {
0% {
transform: rotate(0deg);
animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}
8% {
transform: rotate(var(--fa-swing-angle, 22deg));
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
18% {
transform: rotate(calc(-1 * var(--fa-swing-angle, 22deg) * 0.85));
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
28% {
transform: rotate(calc(var(--fa-swing-angle, 22deg) * 0.65));
animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
}
38% {
transform: rotate(calc(-1 * var(--fa-swing-angle, 22deg) * 0.45));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
48% {
transform: rotate(calc(var(--fa-swing-angle, 22deg) * 0.25));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
56% {
transform: rotate(calc(-1 * var(--fa-swing-angle, 22deg) * 0.1));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
64% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fa-jello {
0% {
transform: scale(1, 1);
animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
}
12% {
transform: scale(var(--fa-jello-scale-x, 1.15), calc(2 - var(--fa-jello-scale-x, 1.15)));
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
24% {
transform: scale(calc(2 - var(--fa-jello-scale-y, 1.12)), var(--fa-jello-scale-y, 1.12));
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
}
36% {
transform: scale(calc(1 + (var(--fa-jello-scale-x, 1.15) - 1) * 0.5), calc(2 - (1 + (var(--fa-jello-scale-x, 1.15) - 1) * 0.5)));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
48% {
transform: scale(calc(2 - (1 + (var(--fa-jello-scale-y, 1.12) - 1) * 0.3)), calc(1 + (var(--fa-jello-scale-y, 1.12) - 1) * 0.3));
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
58% {
transform: scale(1.02, 0.98);
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
68% {
transform: scale(1, 1);
}
100% {
transform: scale(1, 1);
}
}各種アニメーションデモ
Beat (鼓動)
favorite add_circle zoom_out_map pan_zoom fingerprint bolt mode_heat<span class="material-symbols-outlined ms-beat">favorite</span>
<span class="material-symbols-outlined ms-beat">add_circle</span>
<span class="material-symbols-outlined ms-beat">zoom_out_map</span>
<span class="material-symbols-outlined ms-beat">pan_zoom</span>
<span class="material-symbols-outlined ms-beat">fingerprint</span>
<span class="material-symbols-outlined ms-beat" style="--ms-beat-scale: 2.0;">bolt</span>
<span class="material-symbols-outlined ms-beat" style="--ms-animation-duration: 0.5s;">mode_heat</span>Fade (フェード)
warning timer motion_blur battery_1_bar diamond_shine bomb footprint<span class="material-symbols-outlined fa-fade">warning</span>
<span class="material-symbols-outlined fa-fade">timer</span>
<span class="material-symbols-outlined fa-fade" style="--fa-fade-opacity: 0;">motion_blur</span>
<span class="material-symbols-outlined fa-fade">battery_1_bar</span>
<span class="material-symbols-outlined fa-fade">diamond_shine</span>
<span class="material-symbols-outlined fa-fade" style="--fa-animation-duration: 1s;">bomb</span>
<span class="material-symbols-outlined fa-fade">footprint</span>Beat-Fade (鼓動、フェード)
info release_alert speaker_2 trophy award_meal editor_choice celebration<span class="material-symbols-outlined fa-beat-fade">info</span>
<span class="material-symbols-outlined fa-beat-fade">release_alert</span>
<span class="material-symbols-outlined fa-beat-fade">speaker_2</span>
<span class="material-symbols-outlined fa-beat-fade">trophy</span>
<span class="material-symbols-outlined fa-beat-fade">award_meal</span>
<span class="material-symbols-outlined fa-beat-fade">editor_choice</span>
<span class="material-symbols-outlined fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 2;">celebration</span>Bounce (バウンド)
sports_volleyball sports_basketball mail chat cruelty_free skateboarding kitesurfing<span class="material-symbols-outlined fa-bounce">sports_volleyball</span>
<span class="material-symbols-outlined fa-bounce" style="--fa-bounce-land-scale-x: 1.2;--fa-bounce-land-scale-y: .8;--fa-bounce-rebound: 5px;">sports_basketball</span>
<span class="material-symbols-outlined fa-bounce" style="--fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;">mail</span>
<span class="material-symbols-outlined fa-bounce" style="--fa-bounce-start-scale-x: 1;--fa-bounce-start-scale-y: 1;--fa-bounce-jump-scale-x: 1;--fa-bounce-jump-scale-y: 1;--fa-bounce-land-scale-x: 1;--fa-bounce-land-scale-y: 1;--fa-bounce-rebound: 0;">chat</span>
<span class="material-symbols-outlined fa-bounce" style="--fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1;">cruelty_free</span>
<span class="material-symbols-outlined fa-bounce" style="--fa-animation-duration: 2s;">skateboarding</span>
<span class="material-symbols-outlined fa-bounce" style="--fa-animation-duration: 4s;">kitesurfing</span>Buzz (振動)
mobile notifications alarm<span class="material-symbols-outlined fa-buzz">mobile</span>
<span class="material-symbols-outlined fa-buzz" style="--fa-animation-duration: 2s; --fa-buzz-distance: 9px;">notifications</span>
<span class="material-symbols-outlined fa-buzz">alarm</span>Flip (裏返し 180度)
poker_chip docs send album cannabis award_star verified<span class="material-symbols-outlined fa-flip">poker_chip</span>
<span class="material-symbols-outlined fa-flip">docs</span>
<span class="material-symbols-outlined fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;">send</span>
<span class="material-symbols-outlined fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 1;">album</span>
<span class="material-symbols-outlined fa-flip" style="--fa-animation-duration: 3s;">cannabis</span>
<span class="material-symbols-outlined fa-flip">award_star</span>
<span class="material-symbols-outlined fa-flip">verified</span>Flip-360 (裏返し 360度)
poker_chip docs send album cannabis award_star verified<span class="material-symbols-outlined fa-flip-360">poker_chip</span>
<span class="material-symbols-outlined fa-flip-360">docs</span>
<span class="material-symbols-outlined fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0;">send</span>
<span class="material-symbols-outlined fa-flip-360" style="--fa-flip-x: 1; --fa-flip-y: 1;">album</span>
<span class="material-symbols-outlined fa-flip-360" style="--fa-animation-duration: 3s;">cannabis</span>
<span class="material-symbols-outlined fa-flip-360">award_star</span>
<span class="material-symbols-outlined fa-flip-360">verified</span>Float (浮遊)
cloud tooltip bubble_chart hot_tub sailing flight_takeoff<span class="material-symbols-outlined fa-float">cloud</span>
<span class="material-symbols-outlined fa-float">tooltip</span>
<span class="material-symbols-outlined fa-float" style="--fa-float-height: .5em;">bubble_chart</span>
<span class="material-symbols-outlined fa-float">hot_tub</span>
<span class="material-symbols-outlined fa-float" style="--fa-animation-duration: 2s;">sailing</span>
<span class="material-symbols-outlined fa-float">flight_takeoff</span>Jello (ゼリーのような揺れ)
water_drop kid_star deployed_code support<span class="material-symbols-outlined fa-jello">water_drop</span>
<span class="material-symbols-outlined fa-jello">kid_star</span>
<span class="material-symbols-outlined fa-jello" style="--fa-jello-scale-x: 1.5;">deployed_code</span>
<span class="material-symbols-outlined fa-jello" style="--fa-animation-duration: 2s;">support</span>Shake (振る)
notifications timer lock science casino<span class="material-symbols-outlined fa-shake">notifications</span>
<span class="material-symbols-outlined fa-shake">timer</span>
<span class="material-symbols-outlined fa-shake">lock</span>
<span class="material-symbols-outlined fa-shake">science</span>
<span class="material-symbols-outlined fa-shake">casino</span>Spin (回転)
cycle autorenew progress_activity settings star brightness_empty avg_pace workspaces settings_backup_restore mobile_rotate change_circle<span class="material-symbols-outlined fa-spin">cycle</span>
<span class="material-symbols-outlined fa-spin">autorenew</span>
<span class="material-symbols-outlined fa-spin">progress_activity</span>
<span class="material-symbols-outlined fa-spin-snap">settings</span>
<span class="material-symbols-outlined fa-spin">star</span>
<span class="material-symbols-outlined fa-spin-snap-8">brightness_empty</span>
<span class="material-symbols-outlined fa-spin-pulse">avg_pace</span>
<span class="material-symbols-outlined fa-spin">workspaces</span>
<span class="material-symbols-outlined fa-spin fa-spin-reverse">settings_backup_restore</span>
<span class="material-symbols-outlined fa-spin fa-spin-reverse">mobile_rotate</span>
<span class="material-symbols-outlined fa-spin fa-spin-reverse">change_circle</span>Swing (ぶら下がり揺れ)
lock_open content_paste key_vertical notifications<span class="material-symbols-outlined fa-swing">lock_open</span>
<span class="material-symbols-outlined fa-swing" style="--fa-animation-duration: 2s;">content_paste</span>
<span class="material-symbols-outlined fa-swing">key_vertical</span>
<span class="material-symbols-outlined fa-swing" style="--fa-swing-angle: 45deg;">notifications</span>Wag (しっぽ振り)
water_full local_laundry_service pets balance music_note<span class="material-symbols-outlined fa-wag">water_full</span>
<span class="material-symbols-outlined fa-wag">local_laundry_service</span>
<span class="material-symbols-outlined fa-wag">pets</span>
<span class="material-symbols-outlined fa-wag" style="--fa-animation-duration: 2s;">balance</span>
<span class="material-symbols-outlined fa-wag" style="--fa-wag-angle: 45deg;">music_note</span>感想
実際のウェブサイトやアプリケーションに組み込む場合は、アニメーションの多用は禁物で、使いどころを見極める必要があると思いました。動き続ける要素は目障りだったり、アクセシビリティが確保されない場合があります。
装飾としてアニメーションさせる場合は停止ボタンを設けたり、ボタンの操作に対してのみ動きをつける、ループの回数を制限するなど、配慮が必要です。
読み込み中を示す動くアイコンは状況を分かりやすくしてくれますし、注意を促したり、次のアクションを導くための動きは実用的です。ここぞというところで、動くアイコンを組み込みたいと思います。
