<div class="wobbling-1"></div>
<div class="wobbling-2"></div>
<div class="wobbling-3"></div>
<div class="wobbling-4"></div>
<div class="wobbling-5"></div>
<div class="wobbling-6"></div>
<div class="wobbling-7"></div>
<div class="wobbling-8"></div>
<div class="wobbling-9"></div>
<div class="wobbling-10"></div>

.wobbling-1 {
  width:120px;
  height:20px;
  background:
   linear-gradient(#000 0 0) left/20px 20px no-repeat
   #ddd;
  animation:w1 1s infinite linear;
}
@keyframes w1 {
    50% {background-position: right }
}

.wobbling-2 {
  width:120px;
  height:20px;
  border-radius: 20px;
  background:
   radial-gradient(farthest-side,orange 94%,#0000 ) left/20px 20px no-repeat
   lightblue;
  animation:w2 1s infinite linear;
}
@keyframes w2 {
    50% {background-position:right }
}


.wobbling-3 {
  width:120px;
  height:22px;
  border-radius: 40px;
  color:#514b82 ;
  border:2px solid;
  position: relative;
}
.wobbling-3::before {
  content:"";
  position: absolute;
  margin:2px;
  width:25%;
  top:0;
  bottom:0;
  left:0;
  border-radius: inherit;
  background:currentColor;
  animation:w3 1s infinite linear;
}
@keyframes w3 {
    50% {left:100%;transform: translateX(calc(-100% - 4px))}
}


.wobbling-4 {
  width:20px;
  height:20px;
  background:#25b09b;
  box-shadow:0 0 60px 15px #25b09b;
  transform: translate(-80px);
  clip-path:inset(0);
  animation:
    w4-1 0.5s ease-in-out infinite alternate,
    w4-2 1s   ease-in-out infinite;
}

@keyframes w4-1 {
  100% {transform:translateX(80px)}
}

@keyframes w4-2 {
   33% {clip-path:inset(0 0 0 -100px)}
   50% {clip-path:inset(0 0 0 0)     }
   83% {clip-path:inset(0 -100px 0 0)}
}

.wobbling-5 {
  width:120px;
  height:20px;
  clip-path: polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  background:
   conic-gradient(from 135deg at top   ,#f03355 90deg,#0000 0) top    left,
   conic-gradient(from -45deg at bottom,#f03355 90deg,#0000 0) bottom left,
   #ccc;
  background-size: 20px 50%;
  background-repeat: no-repeat;
  animation:w5 1s infinite linear;
}
@keyframes w5 {
    50% {background-position:top right,bottom right }
}

.wobbling-6 {
  width:120px;
  height:21px;
  background:
   linear-gradient(#000 0 0) left/10px 100% no-repeat
   #ddd;
  animation:w6 1s infinite cubic-bezier(0,0.2,1,1);
  position: relative;
}
.wobbling-6:before,
.wobbling-6:after {
  content: "";
  position: absolute;
  left:0;
  right:0;
  height:7px;
  background:
    linear-gradient(#000 0 0) left/10px 100% no-repeat
    #ddd;
  animation: inherit;
}
.wobbling-6:before {
  top:0;
  animation-timing-function: cubic-bezier(0,0,1,1);
}
.wobbling-6:after {
  bottom:0;
  animation-timing-function: cubic-bezier(0,0.4,1,1);
}
@keyframes w6 {
    50% {background-position: right }
}

.wobbling-7{
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  position: relative;
  left:0px;
  top: 0px;
  animation: 
    w7-1 0.6s, 
    w7-2 0.3s;
  animation-timing-function:cubic-bezier(.5,-200,.5,200);
  animation-iteration-count:infinite;
}
@keyframes w7-1 { 
    100% { left:1px; } 
}
@keyframes w7-2 { 
    100% { top :0.3px; } 
}

.wobbling-8{
  width:20px;
  height:20px;
  border-radius:50%;
  position: relative;
  transform-origin:50% -200%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  animation: w8 1s cubic-bezier(.5,-200,.5,200) infinite;
}
.wobbling-8:before {
  content: "";
  position: absolute;
  inset:-200% 8px 100%;
  background:#ddd; 
}
@keyframes w8 { 
    100% { transform:rotate(1deg)} 
}

.wobbling-9{
  width:80px;
  height:20px;
  color:#514b82;
  background:
    radial-gradient(farthest-side,currentColor 98%,#0000) left  /20px 20px,
    radial-gradient(farthest-side,currentColor 98%,#0000) right /20px 20px,
    radial-gradient(farthest-side,#000 98%,#0000) center/5px 5px,
    linear-gradient(currentColor 0 0) center/100% 2px;
  background-repeat: no-repeat;
  animation: w8 1s cubic-bezier(.5,-150,.5,150) infinite;
}

@keyframes w9 { 
    100% { transform:rotate(1deg)} 
}


.wobbling-10 {
    width: calc(100px - 14px);
    height: 50px;
    border-radius: 50px;
    background: 
      radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) left,
      radial-gradient(farthest-side,#0000 calc(100% - 15px),#ccc calc(100% - 14px) 99%,#0000) right;
    background-size: calc(50% + 7px) 100%;
    background-repeat: no-repeat;
    position: relative;
   animation: w10-0 1s infinite linear;
}
.wobbling-10:before {
  content: "";
  position: absolute;
  inset:0;
  margin:auto; 
  width:10px;
  height: 10px;
  border-radius: 50%;
  background:#f03355;
  transform-origin: -14px 50%;
  animation: w10-1 0.5s infinite linear;
}

@keyframes w10-0 { 
    0%,49.99% { transform:scaleX(1)}
    50%,100% { transform:scaleX(-1)} 
}

@keyframes w10-1 { 
    100% { transform:rotate(1turn)} 
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}