OnomaUI

かちん の動き

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

kachin2種類公式

意味ごとの動き

硬い物が当たって鳴る
癇に障る

硬い物が当たって鳴る

ぶつかった反応

左右に3往復、最初は5%の幅で、だんだん小さく震えて止まる。

時間
0.3s
くり返し
しない
速さの変化
linear
動かすもの
位置・回転 translate rotate
CSS を見る
@keyframes onoma-kachin {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  14.29% { transform: translate(-5%, 0%) rotate(-1.75deg); }
  28.57% { transform: translate(4.17%, 0%) rotate(1.46deg); }
  42.86% { transform: translate(-3.33%, 0%) rotate(-1.17deg); }
  57.14% { transform: translate(2.5%, 0%) rotate(0.88deg); }
  71.43% { transform: translate(-1.67%, 0%) rotate(-0.58deg); }
  85.71% { transform: translate(0.83%, 0%) rotate(0.29deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-kachin {
  animation: onoma-kachin 0.3s linear both;
}

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-kachin { animation: none; }
}
自分の素材で試すコードを使う

癇に障る

いらっとした表現

一瞬108%に広がって光り、元に戻る。

時間
0.26s
くり返し
しない
速さの変化
ease-out
動かすもの
大きさ・透明度 scale opacity
CSS を見る
@keyframes onoma-kachin-2 {
  0% { transform: scale(1, 1); opacity: 1; }
  20% { transform: scale(1.08, 1.08); opacity: 0.35; }
  50% { transform: scale(1, 1); opacity: 1; }
  100% { transform: scale(1, 1); opacity: 1; }
}

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

/* 動きを減らす設定の人には、動かさない */
@media (prefers-reduced-motion: reduce) {
  .onoma-kachin-2 { animation: none; }
}
自分の素材で試すコードを使う

近い動きと見比べる

かちん硬い物が当たって鳴る
かりかりいらいらと張りつめる
むかっ一瞬腹が立つ