可以通过CSS的@keyframes和animation属性来处理这个问题。其中@keyframes指定了动画状态的关键帧，animation属性则定义了动画的名称、持续时间、延迟、重复次数、运动模式等参数。

以下是一个示例代码，演示了不同屏幕下图像元素的移动：

/* 在不同屏幕宽度下定义关键帧 */
@keyframes move {
  0% { transform: translateX(-50px); }
  50% { transform: translateX(50px); }
  100% { transform: translateX(-50px); }
}

/* 定义动画，设置不同的持续时间和延迟时间 */
.image {
  animation: move 4s ease-in-out 0s infinite;
}

@media (max-width: 768px) {
  .image {
    animation-duration: 3s;
    animation-delay: 1s;
  }
}

@media (max-width: 480px) {
  .image {
    animation-duration: 2s;
    animation-delay: 2s;
  }
}

在上面的代码中，@keyframes定义了一个名为move的动画，包含了三个关键帧，分别表示开始、中间和结束时的状态。通过animation属性将这个动画应用到了图像元素上，并指定了它的名称、持续时间、延迟时间和重复次数。而@media则通过媒体查询来针对不同屏幕宽度设定不同的动画持续时间和延迟时间，实现了图像元素在不同响应式屏幕上的移动效果。