添加内容时设置div动画

div {
  width: 100px;
  transition: width 0.5s;
}

div:hover {
  width: 200px;
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: gradient 3s infinite;
}

@keyframes gradient {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

function smoothScrollTo(element, targetPosition, duration) {
  const startPosition = element.scrollTop;
  const distance = targetPosition - startPosition;
  const startTime = performance.now();

  function scroll(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easing = easeInOutQuad(progress);
    element.scrollTop = startPosition + distance * easing;

    if (elapsed < duration) {
      requestAnimationFrame(scroll);
    }
  }

  requestAnimationFrame(scroll);
}

function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

const div = document.getElementById('myDiv');
div.addEventListener('click', () => {
  smoothScrollTo(div, 500, 1000);
});