CSS animation gedraagd zich vreemd...

[Barracuda_82]

.. of ik snap het gewoon niet

Ik ben css animaties en transforms uit aan het vogelen. Als ik dmv keyframes een animatie opzet welke 1 keer afgespeeld moet worden, bijvoorbeeld het verplaatsen van een element op de pagina van left 50px naar left 500px, dan werkt dit gewoon goed. Het element blijft na de laatste frame op left 500px staan en de animatie stopt.

Als ik echter een transform toevoeg aan de animatie, bijvoorbeeld rotate, dan roteert ie het element naar de opgegeven waarde bij 100%, maar als de animatie dan klaar is draait het element weer terug naar zijn beginpositie.

code:

@-moz-keyframes rotateRound {
    0%   { -moz-transform: scaley(.49) rotate(50deg); }
    25%  { -moz-transform: scaley(.49) rotate(140deg); }
    50%  { -moz-transform: scaley(.49) rotate(230deg); }
    75%  { -moz-transform: scaley(.49) rotate(320deg); }
    100% { -moz-transform: scaley(.49) rotate(50deg); top: 30%; }
}

Bekijk de animatie op jsfiddle (firefox only!). Hover over de kubus om te zien wat er gebeurd. Het bovenste vlak draait dus rond en beweegt omhoog, maar de rotatie schiet aan het eind weer terug naar zijn beginpositie.

Is dit een bug in firefox of mis ik nog iets?

[Splash]

De reden dat je element terugklapt is dat je in je laatste regel van je voorbeeld terugdraait naar 50deg. Als je wil dat het element verderdraait kun je gewoon boven de 320 graden gaan, dit representeerd dus verder dan 1 rondje draaien.

code:

@-moz-keyframes rotateRound {
    0%   { -moz-transform: scaley(.49) rotate(50deg); }
    25%  { -moz-transform: scaley(.49) rotate(140deg); }
    50%  { -moz-transform: scaley(.49) rotate(230deg); }
    75%  { -moz-transform: scaley(.49) rotate(320deg); }
    100% { -moz-transform: scaley(.49) rotate(370deg); top: 30%; }
}

[Barracuda_82]

Dat is niet waar. Aan die optie had ik ook al gedacht, maar helaas is het niet zo makkelijk.

Kijk naar deze versie om beter te zien wat ik bedoel. Hier draai ik het element van 50 graden naar 100 graden. Aan het eind van de animatie zou het vlak dus op 100 graden moeten blijven staan, maar dat gebeurd niet. Hij springt weer terug naar 50 graden.

Overigens bestaat een volledige cirkel uit 360 graden, en niet 320.

[Barracuda_82]

Effe wat zitten klooien en je hebt toch gedeeltelijk gelijk

Blijkbaar ligt de oplossing er in dat de standaard status, zoals gedefineerd in de class, de eindpositie moet zijn van de animatie. Als je inderdaad meer dan 360 graden invoert draait ie gewoon verder en stopt ie bij 410 graden (360 + de default 50 graden). Hij schiet dan wel terug naar 50 graden, maar dat zie je niet omdat het dezelfde hoek is.