ぶんぶん の動きは、2つに分かれます。
bunbun2種類公式
その場で2回転し、それを繰り返す。
@keyframes onoma-bunbun {
0% { transform: rotate(0deg); }
100% { transform: rotate(720deg); }
}
.onoma-bunbun {
animation: onoma-bunbun 0.58s cubic-bezier(.45,0,.55,1) infinite both;
}
/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
.onoma-bunbun { animation: none; }
}左右に5往復、最大28°ずつ首を振るように揺れて止まる。
@keyframes onoma-bunbun-2 {
0% { transform: rotate(0deg); }
9.09% { transform: rotate(28deg); }
18.18% { transform: rotate(-25.2deg); }
27.27% { transform: rotate(22.4deg); }
36.36% { transform: rotate(-19.6deg); }
45.45% { transform: rotate(16.8deg); }
54.55% { transform: rotate(-14deg); }
63.64% { transform: rotate(11.2deg); }
72.73% { transform: rotate(-8.4deg); }
81.82% { transform: rotate(5.6deg); }
90.91% { transform: rotate(-2.8deg); }
100% { transform: rotate(0deg); }
}
.onoma-bunbun-2 {
animation: onoma-bunbun-2 0.8s ease-in-out both;
}
/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
.onoma-bunbun-2 { animation: none; }
}