ぱちんの動き

ぱちんの動きは、2つに分かれます。

pachin2種類公式

意味ごとの動き

泡がはじける

留め具がはまる

泡がはじける

通知を消す

140%まで一気に広がって、はじけるように消える。

時間: 0.26s
くり返し: しない
速さの変化: ease-out
動かすもの: 大きさ・透明度 scale opacity

CSS を見る

@keyframes onoma-pachin {
  0% { transform: scale(1, 1); opacity: 1; }
  35% { transform: scale(1.2, 1.2); opacity: 1; }
  100% { transform: scale(1.4, 1.4); opacity: 0; }
}

.onoma-pachin {
  animation: onoma-pachin 0.26s ease-out both;
}

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

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

留め具がはまる

設定を確定する

一瞬6°ひねって小さく縮み、かちっと元に戻る。

時間: 0.28s
くり返し: しない
速さの変化: ease-out
動かすもの: 回転・大きさ rotate scale

CSS を見る

@keyframes onoma-pachin-2 {
  0% { transform: rotate(0deg) scale(1, 1); }
  20% { transform: rotate(6deg) scale(0.94, 0.94); }
  45% { transform: rotate(-1.8deg) scale(1.02, 1.02); }
  70% { transform: rotate(0.6deg) scale(1, 1); }
  100% { transform: rotate(0deg) scale(1, 1); }
}

.onoma-pachin-2 {
  animation: onoma-pachin-2 0.28s ease-out both;
}

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

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

近い動きと見比べる

ぱちん泡がはじける

きらっ一瞬光る

しゅぽっ栓が抜けるように出る

同じ動きを表す言葉

ぱっちん