rotateClockwise (rotateAntiClockwise) not working

[gkontokotsios]

Hi @bitshadow and thank you for your great job!

I saw that in order to get my icons to rotate I had to start the rotation from 0% and not only on 100%. In your demo I see it working without this but as you can see it doesn't on my JSFiddle example

My project consists of:
jQuery v2.1.3
Materialize v0.97 (http://materializecss.com)
Iconate v0.2.4

My fix:

@keyframes rotateClockwise {
    0% {
        opacity: 1;
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 0;
        transform: rotateZ(180deg);
        transform-origin: center;
    }
    100% {
        transform: rotateZ(360deg);
        transform-origin: center;
        opacity: 1;
    }
}

@keyframes rotateAntiClockwise {
    0% {
        opacity: 1;
        transform: rotateZ(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 0;
        transform: rotateZ(-180deg);
        transform-origin: center;
    }
    100% {
        transform: rotateZ(-360deg);
        transform-origin: center;
        opacity: 1;
    }
}

[bitshadow]

Thanks @gkontokotsios for using it and spending time for fixing it.

Iconate expects there should not be any other transforms applied to it. If you see 'mdi-navigation-menu' styles, materialize.css is setting transform to translate(0, 0) which is causing this behaviour.

[class^="mdi-"], [class*="mdi-"] {
    speak: none;
    display: inline-block;
    font-family: "Material-Design-Icons";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

If you unselect transform: translate(0,0) from css inspector it should work fine.

I see you have added rotatez(180deg) at 50% in key frames. But if you see carefully it will not rotate icon in the way we expect. I am sure you must have notice the behaviour in which it stops at 50% and then again rotates it to reach 360deg.

[gkontokotsios]

Thank you for your quick answer @bitshadow! Setting transform: initial on the element solved the issue as you said.

Thanks for the tip on the 50% rotateZ issue. I hadn't noticed it. 👍

[bitshadow]

I am glad it helped. :)