First and foremost, thanks for this tool. It is extremely impressive, and has made playing with CSS animations fun! Huge thanks!
I wouldn't claim to be an expert here, so this could be by design. Why are there two translates applied in the transform, one with pixels as units and the other with percentages as units?
I was struggling to figure out why my animations were different between Chrome and Firefox. I believe FF is ignoring the second translate, while Chrome applies both. When I remove the second percentage-based definition, both browsers behave similarly. If this is a bug, I hope this helps; if not, I'd love to know what's going on...
Thanks again!
Example CSS Ouput: (translates emphasized)
.S {
-webkit-animation-name: S-transform-keyframes;
-webkit-animation-duration: 5000ms;
-webkit-animation-delay: 0ms;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 0 0;
animation-name: S-transform-keyframes;
animation-duration: 5000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: 0 0;
}
@-webkit-keyframes S-transform-keyframes {
0% {-webkit-transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
40% {-webkit-transform:translate(2px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
60% {-webkit-transform:translate(-9px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
80% {-webkit-transform:translate(-17px, -6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);-webkit-animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {-webkit-transform:translate(-1px, -1px) scale(1) rotateX(0deg) rotateY(39deg) rotateZ(0deg) translate(-50%, -50%);}
}
@Keyframes S-transform-keyframes {
0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
40% {transform:translate(2px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
60% {transform:translate(-9px, -14px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
80% {transform:translate(-17px, -6px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
100% {transform:translate(-1px, -1px) scale(1) rotateX(0deg) rotateY(39deg) rotateZ(0deg) translate(-50%, -50%);}
}