cssうんちに魂宿してみた

💩おさらい💩

前回cssでうんちを書いたぞ！
cssだけでうんち書いてみた
今日はこれをよりうんちらしくするべく、魂を宿してみたい！

💩cssでぷる〜んていうアニメーション💩

キーフレームを頑張って打て、scale()を変えればできる！

@keyframes jelly {
  0% {
    transform: scale(1, 1);
  }
  8% {
    transform: scale(1, 1);
  }
  10% {
    transform: scale(1.1, 0.9);
  }
  13% {
    transform: scale(0.9, 1.1);
  }
  17.5% {
    transform: scale(1, 1);
  }
  19% {
    transform: scale(1, 1);
  }
  58% {
    transform: scale(1, 1);
  }
  60% {
    transform: scale(1.1, 0.9);
  }
  63% {
    transform: scale(0.9, 1.1);
  }
  67.5% {
    transform: scale(1, 1);
  }
  69% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

💩宿した💩

See the Pen unchi-soul by petapetapeta (@petapetapeta) on CodePen.

マウスを乗せるとぷる〜んってなるようになりました！
可愛いですね💩