旋转动画不适用于translate。我知道，我必须把translate和rotate放在同一个属性中，但是当使用关键帧时，这怎么可能呢？代码如下：
@-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
@keyframes rotating {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
img{
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
-webkit-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
position:absolute;
top:50%;
left:50%;
}这将使旋转，但它禁用平移。如果我把平移到旋转动画中，平移也会被动画化（当然）。
1条答案
按热度按时间9w11ddsr1#
2022年以后的答案
您可以通过使用具有pretty good browser support的单个属性转换来解决此问题。
简而言之，使用
scale、translate等属性代替transform。旁注：现在，任何与转换或动画相关的东西都不需要特定于浏览器的属性。
2014年的原始答案
问题是动画中的
transform覆盖了默认的transform:translate。在这种情况下，您可以在动画本身中合并它们，但必须进行硬编码。如果需要动态的，可以将其嵌套在元素中，并在不影响另一个元素的情况下设置一个元素的动画-最有可能的是平移父元素并旋转子元素。
如果您绝对 * 不能 * 拥有多个元素，则可以使用JavaScript影响元素的转换矩阵，在这种情况下，使用GSAP之类的动画库将是非常有利的。