Question

旋转动画无法使用翻译。我知道，我必须将translate与旋转放在同一属性中，但是在使用关键帧时这是如何实现的？代码是这样的：

@-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%;
}

这将进行旋转，但会禁用翻译。如果我将翻译放入旋转动画中，那么翻译也会被动画化（当然）。

Answer 1

问题是动画中的transform会覆盖默认的transform:translate。在这种情况下，您可以将它们组合在动画本身中，但必须进行硬编码

@keyframes rotating {
    from{
        transform: translate(-50%,-50%) rotate(0deg);    
    }
    to{
        transform: translate(-50%,-50%) rotate(360deg);  
    }
}

如果你需要它是动态的，你可以将它嵌套在一个元素中并使其动画而不影响另一个元素 - 最有可能翻译父节点并旋转子节点。

如果绝对不能有多个元素，则可以使用JavaScript影响元素的变换矩阵，在这种情况下使用像GSAP这样的动画库将是有利的。

旋转动画并翻译？

1 个答案: