ひらひらの動き

ひらひらの動きは、2つに分かれます。

hirahira2種類公式

意味ごとの動き

軽やかに舞う

手を振る

軽やかに舞う

待機中の飾り

左の端を留めたまま、最大24°はためき続ける。

時間: 1.6s
くり返し: する
速さの変化: ease-in-out
動かすもの: 奥行きの回転・ゆがみ rotateY skewY

CSS を見る

@keyframes onoma-hirahira {
  0% { transform: perspective(300px) rotateY(0deg) skewY(0deg); }
  50% { transform: perspective(300px) rotateY(-24deg) skewY(-8deg); }
  100% { transform: perspective(300px) rotateY(7.2deg) skewY(5.6deg); }
}

.onoma-hirahira {
  animation: onoma-hirahira 1.6s ease-in-out infinite alternate both;
  transform-origin: 0% 50%;
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-hirahira { animation: none; }
}

自分の素材で試すコードを使う

手を振る

あいさつ・お別れ

左右に3往復、最大15°ずつ首を振るように揺れて止まる。

時間: 0.9s
くり返し: しない
速さの変化: ease-in-out
動かすもの: 回転 rotate

CSS を見る

@keyframes onoma-hirahira-2 {
  0% { transform: rotate(0deg); }
  14.29% { transform: rotate(15deg); }
  28.57% { transform: rotate(-12.5deg); }
  42.86% { transform: rotate(10deg); }
  57.14% { transform: rotate(-7.5deg); }
  71.43% { transform: rotate(5deg); }
  85.71% { transform: rotate(-2.5deg); }
  100% { transform: rotate(0deg); }
}

.onoma-hirahira-2 {
  animation: onoma-hirahira-2 0.9s ease-in-out both;
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-hirahira-2 { animation: none; }
}

自分の素材で試すコードを使う

近い動きと見比べる

ひらひら軽やかに舞う

ぷかぷか水に浮かび漂う

もくもく煙が湧き上がる