旋转动画不适用于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之类的动画库将是非常有利的。