CSSのanimationでフラフラ往復させるサンプル

CSSでフラフラ往復させるようなやつを試行錯誤しながらつくってみました。
keyframesとかに動きをまとめようとしたけどできなかったので枠とかで囲ってます。そもそもできないのかな？



サンプル

See the Pen CSSでフラフラ往復させるサンプル by takapen (@takapen) on CodePen.

html

  


イラスト https://www.irasutoya.com/2017/10/blog-post_670.html

css

section {
  position: relative;
}
.yoko {
  margin-left: -50px;
  position: absolute;
  top: 10px;
  left: 50%;
  animation: ushi-ugoki-yoko 15s infinite;
}
.muki {
  animation: ushi-ugoki-muki 15s infinite;
}
.ugoki {
  animation: ushi-ugoki 1.5s infinite;
}


@keyframes ushi-ugoki-yoko {
  0%   {transform: translateX(0px);}
  50%  {transform: translateX(50px);}
  100% {transform: translateX(0px);}
}
@keyframes ushi-ugoki-muki {
  0%   {transform: scaleX(1);}
  49%  {transform: scaleX(1);}
  50%  {transform: scaleX(-1);}
  99%  {transform: scaleX(-1);}
  100% {transform: scaleX(1);}
}
@keyframes ushi-ugoki {
  0%   {transform: rotate(2deg);}
  50%  {transform: rotate(2deg);}
  51%  {transform: rotate(-2deg);}
  100% {transform: rotate(-2deg);}
}