ぐっの動き

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

gu2種類公式

意味ごとの動き

一瞬力を込める

胸に迫る

一瞬力を込める

決定ボタンを押す

押すと18%小さく沈み、3%ふくらんでから元の大きさに戻る。

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

CSS を見る

@keyframes onoma-gu {
  0% { transform: scale(1, 1); }
  35% { transform: scale(0.82, 0.82); animation-timing-function: ease-out; }
  70% { transform: scale(1.03, 1.03); animation-timing-function: ease-in-out; }
  100% { transform: scale(1, 1); }
}

.onoma-gu {
  animation: onoma-gu 0.4s ease-out both;
}

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

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

胸に迫る

感動・共感の表現

120%まで大きく脈打ち、もう一度小さく打ってから元に戻る。

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

CSS を見る

@keyframes onoma-gu-2 {
  0% { transform: scale(1, 1); }
  20% { transform: scale(1.2, 1.2); }
  40% { transform: scale(0.96, 0.96); }
  60% { transform: scale(1.08, 1.08); }
  100% { transform: scale(1, 1); }
}

.onoma-gu-2 {
  animation: onoma-gu-2 0.8s ease-out both;
}

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

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

近い動きと見比べる

ぐっ一瞬力を込める

どばどば大量に注ぎ続ける

ざあざあ雨が激しく降る