CSS 两个及更多对象独立动画（旋转+缩放）答案

【问题标题】：CSS two and more objects independent animations (rotate+scale)CSS 两个及更多对象独立动画（旋转+缩放）
【发布时间】：2021-05-23 09:44:44
【问题描述】：

请用这个例子帮助新手每张图片都必须独立于其他图片进行缩放和旋转，相对于页面上给定坐标处的中心。缩放动画重复1次，旋转动画无限次。

我可以在第一张图片之后延迟第二张图片的动画吗？这一切都可以在纯 CSS 中完成吗？

.image {
    -webkit-animation: scale 4s 1 linear;    
}

.spinner {
      -webkit-animation: spin 8s infinite linear;
}


@-webkit-keyframes spin { 
  0% { 
        transform: rotate(0deg);
    } 
    100% { 
        transform: rotate(360deg);
    } 
}
@-webkit-keyframes scale {
   0% {
         transform: scaleX(0) scaleY(0);
    }
}
    100% {
         transform: scaleX(1) scaleY(1);
    }
}

<div class="spinner" style="position: absolute; top: 20%; left: 30%;">
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" >
</div>

<div class="spinner" style="position: absolute; top: 50%; left: 50%;">
<img class="image" src="http://makeameme.org/media/templates/120/rainbow-spongbob.jpg">
</div>

【问题讨论】：

如果我误解了，我很抱歉。你试过动画延迟属性吗？
你还没有关闭 div
hense bob 嵌套在 cat 容器中。

天哪，真是个愚蠢的错误。非常感谢先生，已修复

@azizarslan，是的，animation-delay 单独用于缩放和旋转动画效果很好（未在示例中使用），但组合动画（缩放+旋转）同时对两张图片运行。第二张图片的组合动画可以在第一张之后短时间运行吗？我想我需要为两张不同的图片使用不同的关键帧或不同的动画。

@WallabeBeatles 您不需要使用单独的动画。只需为相关元素定义不同的动画延迟即可。

标签： html css animation transform scale

【解决方案1】：

你只需要设置：

.image:nth-child(n) {
    animation-delay: 5s;
}
.image:nth-child(n+1) {
    animation-delay: 6s;
}

根据需要更改延迟，并通过每次将 nth-child() 更改为 n+2、n+3、n+4 来设置其他延迟。那是你想要的吗？

【讨论】：