teenagegoths

shake animation

Apr 19th, 2021 (edited)
1,930
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 0.74 KB | None | 0 0
  1. #shakey {
  2.          padding:4px;
  3.  animation: shake 0.5s infinite;
  4.  }
  5.  
  6.  @keyframes shake {
  7.  0% {
  8.  transform: translate(1px, 1px) rotate(0deg);
  9.  }
  10.  10% {
  11.  transform: translate(-1px, -2px) rotate(-1deg);
  12.  }
  13.  20% {
  14.  transform: translate(-3px, 0px) rotate(1deg);
  15.  }
  16.  30% {
  17.  transform: translate(3px, 2px) rotate(0deg);
  18.  }
  19.  40% {
  20.  transform: translate(1px, -1px) rotate(1deg);
  21.  }
  22.  50% {
  23.  transform: translate(-1px, 2px) rotate(-1deg);
  24.  }
  25.  60% {
  26.  transform: translate(-3px, 1px) rotate(0deg);
  27.  }
  28.  70% {
  29.  transform: translate(3px, 1px) rotate(-1deg);
  30.  }
  31.  80% {
  32.  transform: translate(-1px, -1px) rotate(1deg);
  33.  }
  34.  90% {
  35.  transform: translate(1px, 2px) rotate(0deg);
  36.  }
  37.  100% {
  38.  transform: translate(1px, -2px) rotate(0deg);
  39.  }
  40.  }
Add Comment
Please, Sign In to add comment