旋转动画并翻译？

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这样的动画库将是有利的.