Animation Generator

<div class="motion-preview">
  <div class="motion-preview__dot"></div>
  <div class="motion-preview__card">CSS Motion</div>
</div>

.motion-preview {
  --motion-start-x: -24px;
  --motion-end-x: 24px;
  --motion-start-y: -16px;
  --motion-end-y: 16px;
  --motion-start-scale: 0.96;
  --motion-end-scale: 1.06;
  --motion-start-opacity: 0.72;
  --motion-end-opacity: 1;
  --motion-start-rotate: 0deg;
  --motion-end-rotate: 6deg;
  --motion-start-skew-x: 0deg;
  --motion-end-skew-x: 4deg;
  --motion-start-skew-y: 0deg;
  --motion-end-skew-y: 2deg;
  --motion-duration: 1200ms;
  --motion-delay: 0ms;
  --motion-easing: cubic-bezier(0.3, 0.8, 0.4, 1);
  --motion-iterations: infinite;
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 160px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(104, 185, 255, 0.14), #0b1120);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.motion-preview__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #7dd3fc;
  animation: css-zone-motion var(--motion-duration) var(--motion-easing) var(--motion-delay) var(--motion-iterations) alternate;
}

.motion-preview__card {
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #e2e8f0;
  font-weight: 600;
  animation: css-zone-motion var(--motion-duration) var(--motion-easing) var(--motion-delay) var(--motion-iterations) alternate;
}

@keyframes css-zone-motion {
  0% {
    transform: translate(var(--motion-start-x), var(--motion-start-y)) rotate(var(--motion-start-rotate)) skew(var(--motion-start-skew-x), var(--motion-start-skew-y)) scale(var(--motion-start-scale));
    opacity: var(--motion-start-opacity);
  }
  100% {
    transform: translate(var(--motion-end-x), var(--motion-end-y)) rotate(var(--motion-end-rotate)) skew(var(--motion-end-skew-x), var(--motion-end-skew-y)) scale(var(--motion-end-scale));
    opacity: var(--motion-end-opacity);
  }
}