anime.js overrides static css transforms?

Adding a static css transform on a svg path element and then animating the same element using anime.js overrides the original css transform.

In example if I attempt a transform: rotate(45deg) on the static css, and then I run anime.js like this:

	anime({
		targets: "svg path#uno",
		rotate: "-360deg",
		duration: 8000,
		loop: true,
		easing: "linear"
	})

… the element starts rotating from 0deg not 45deg as expected.

Visually, on load, I get a quick jump from the 45º rotated state to the 0º rotated state and then the animation starts.

The same happens with other css transforms, like translate.

If I cannot transform the svg path with regular CSS BEFORE the animation… can I do it within anime itself?

I mean:

on load
inmediately transform(rotate,translate...) the svg path ONCE
THEN rotate -360deg during 8000ms ON LOOP

I could just transform the svg before pasting it on my code, but I would like to randomize this transform on load.

Thank you

[Akhu]

This is working for me ! Thanks again @plagasul Quick sample :

basicTimeline.add({ 
        targets: '#id',
        opacity: [0,1], 
        rotateX: ['40deg', '0deg'], //Setting initial and target values for the transform
        translateY: ['-10px','0px'],
        easing: easingCustom,
        duration: 500
});

[plagasul]

I’ve found this on the documentation http://animejs.com/documentation/#specificInitialValue it allows to set initial value , perhaps that’ll be enough for our cases