如何实现两张图片独立移动（无需JavaScript）

你当前的代码只设置了图片的初始定位，没有添加动画逻辑。要让两张图片独立移动，只需用CSS @keyframes 定义各自的动画轨迹，再分别绑定到对应的图片上即可，完全不需要JavaScript。

完整实现代码 #

.image {
    width: 200px; 
    height: auto; 
    position: absolute;
    /* 基础动画通用属性，可按需调整 */
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* 第一张图片的动画轨迹：左右+小幅上下移动 */
@keyframes moveImage1 {
    0% { left: 500px; top: 50px; }
    50% { left: 800px; top: 100px; }
    100% { left: 500px; top: 50px; }
}

.image:nth-child(1) {
    animation-name: moveImage1;
}

/* 第二张图片的动画轨迹：上下+左右往返移动 */
@keyframes moveImage2 {
    0% { left: 200px; top: 100px; }
    33% { left: 300px; top: 200px; }
    66% { left: 100px; top: 200px; }
    100% { left: 200px; top: 100px; }
}

.image:nth-child(2) {
    animation-name: moveImage2;
}

关键说明 #

• 用@keyframes分别定义两个独立的动画轨迹，在关键帧的不同百分比节点设置top/left值，就能控制图片的移动路径。
• 每个图片通过animation-name绑定专属动画，还可以单独给某张图片调整animation-duration（动画时长）、animation-delay（延迟启动）等属性，进一步强化独立性。
• 如果需要更复杂的动画效果，还可以在关键帧中加入transform: translate()、rotate()等属性，扩展动画表现。

内容的提问来源于stack exchange，提问作者Fractom