<div></div>

div {
  background-color: lightblue;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}


/* Default animation */
@keyframes movingAnimation {
    0% { transform: translateX(0); opacity: 0; }
    50% { transform: translateX(100px); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

div {
    animation: movingAnimation 2s ease-in-out infinite;
}

/* Simpler animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    @keyframes simpleAnimation {
        0% { opacity: 0.8; }
        100% { opacity: 1; }
    }

    div {
        animation: simpleAnimation 1s ease-in-out infinite;
    }
}