Rotate animation and translate?

Question

The rotate animation won't work with translate. I get, that I have to put translate in the same property with the rotate, but how is this possible when using keyframes? Code is like so:

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

This will make the rotation, but it disables the translate. If I put the translate into the rotating animation, the translate is being animated as well(ofcourse).

Answer 1

The issue is that the transform in the animation is overriding the default transform:translate. In this case, you can combine them in the animation itself but it has to be hard coded

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

If you need it to be dynamic, you can nest it in an element and animate one while not affecting the other - most likely translate the parent and rotate the child.

If you absolutely cannot have more than one element, you can affect the transform matrix for the element using JavaScript, in which case using an animation library like GSAP would be advantageous.