たまにカタカタ揺らすcss

たまにカタカタするCSSのアニメーションサンプルです。



infinite 無限リピート
alternate 往復する （0% -> 100% -> 100% -> 0% のループ）

See the Pen たまにカタカタ揺らすcss by takapen (@takapen) on CodePen.

.ugoki {
  margin: 30px;
  width: 100px;
  height: 100px;
  animation:katakata 6s infinite ease-in-out alternate;
}
img {
  width: 100px;
  height: 100px;
  background: #ccc;
}
@keyframes katakata {
  0% {transform:translate(0, 0) rotate(0deg);}
  21% {transform:translate(0, 0) rotate(0deg);}

  22% {transform:translate(0, 0) rotate(-3deg);}
  23% {transform:translate(0, -1px) rotate(0deg);}
  24% {transform:translate(0, -1px) rotate(3deg);}

  25% {transform:translate(1px, 0) rotate(-2deg);}
  26% {transform:translate(0, 1px) rotate(0deg);}
  27% {transform:translate(0, 0) rotate(3deg);}

  28% {transform:translate(0, 0) rotate(0deg);}
  100% {transform:translate(0, 0) rotate(0deg);}
}