ぱっの動き

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

pa2種類公式

意味ごとの動き

一瞬で現れる

一瞬で消える

一瞬で現れる

メニューを出す

70%の大きさから、一気に元の大きさへ飛び込んでくる。

時間: 0.2s
くり返し: しない
速さの変化: cubic-bezier(.2,.9,.3,1)
動かすもの: 大きさ・透明度 scale opacity

CSS を見る

@keyframes onoma-pa {
  0% { transform: scale(0.7, 0.7); opacity: 0; }
  60% { transform: scale(0.88, 0.88); opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

.onoma-pa {
  animation: onoma-pa 0.2s cubic-bezier(.2,.9,.3,1) both;
}

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

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

一瞬で消える

閉じる・消す

115%まで広がりながら0%浮かび、ふっと消える。

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

CSS を見る

@keyframes onoma-pa-2 {
  0% { transform: translate(0%, 0%) scale(1, 1); opacity: 1; }
  100% { transform: translate(0%, 0%) scale(1.15, 1.15); opacity: 0; }
}

.onoma-pa-2 {
  animation: onoma-pa-2 0.22s ease-out both;
}

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

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

近い動きと見比べる

ぱっ一瞬で現れる

ぴりぴり張りつめて震える

わっいきなり驚かせる