ころっの動き

ころっの動きは、2つに分かれます。

koro2種類公式

意味ごとの動き

小さく転がる

あっさり変わる

小さく転がる

アイテムが出る

左60%から転がってきて、ゆっくり止まる。

時間: 0.5s
くり返し: しない
速さの変化: cubic-bezier(.2,.7,.3,1)
動かすもの: 位置・回転 translate rotate

CSS を見る

@keyframes onoma-koro {
  0% { transform: translate(-60%, 0%) rotate(-68.75deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-koro {
  animation: onoma-koro 0.5s cubic-bezier(.2,.7,.3,1) both;
}

/* 動きを減らす設定の人には、現れるだけ */
@keyframes onoma-koro-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-koro { animation: onoma-koro-fade 0.2s ease-out both; }
}

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

あっさり変わる

状態の切り替え

左の端を軸に、180°めくれて開く。

時間: 0.36s
くり返し: しない
速さの変化: ease-in-out
動かすもの: 奥行きの回転 rotateY

CSS を見る

@keyframes onoma-koro-2 {
  0% { transform: perspective(400px) rotateY(0deg); }
  100% { transform: perspective(400px) rotateY(-180deg); }
}

.onoma-koro-2 {
  animation: onoma-koro-2 0.36s ease-in-out both;
  transform-origin: 0% 50%;
}

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

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

近い動きと見比べる

ころっ小さく転がる

がばっ勢いよく起き上がる

どんどん強く何度もたたく