OnomaUI

うぃーん の動き

うぃーん の動きは、2つに分かれます。

wiin2種類公式

意味ごとの動き

機械がなめらかに動く
モーターがうなる

機械がなめらかに動く

パネルを開く

左120%の所から、滑るように入って止まる。

時間
0.9s
くり返し
しない
速さの変化
cubic-bezier(.2,.8,.2,1)
動かすもの
位置・透明度 translate opacity
CSS を見る
@keyframes onoma-wiin {
  0% { transform: translate(-120%, 0%); opacity: 0; }
  40% { transform: translate(-72%, 0%); opacity: 1; }
  100% { transform: translate(0%, 0%); opacity: 1; }
}

.onoma-wiin {
  animation: onoma-wiin 0.9s cubic-bezier(.2,.8,.2,1) both;
}

/* 動きを減らす設定の人には、現れるだけ */
@keyframes onoma-wiin-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .onoma-wiin { animation: onoma-wiin-fade 0.2s ease-out both; }
}
自分の素材で試すコードを使う

モーターがうなる

処理中を示す

左右に1%、細かく速く振動し続ける。

時間
0.1s
くり返し
する
速さの変化
linear
動かすもの
位置・回転 translate rotate
CSS を見る
@keyframes onoma-wiin-2 {
  0% { transform: translate(0%, 0%) rotate(0deg); }
  25% { transform: translate(1%, 0%) rotate(0deg); }
  50% { transform: translate(0%, 0%) rotate(0deg); }
  75% { transform: translate(-1%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

.onoma-wiin-2 {
  animation: onoma-wiin-2 0.1s linear infinite both;
}

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

近い動きと見比べる

うぃーん機械がなめらかに動く
ぐつぐつじっくり煮える
むわっ熱気が立ちこめる