Well, I managed to make it work.
I have created 3 more steps near the buggy zone:
34.98% {
top: 15px;
transform-origin: top left;
transform: translateX(-25px) skewX(0deg)rotate(179deg);
opacity: 1;
}
34.985% {
top: 15px;
transform-origin: top left;
transform: translateX(-25px) skewX(0deg)rotate(179deg);
opacity: 0;
}
34.99% {
top: 15px;
transform-origin: top left;
transform: translateX(-25px) skewX(0deg)rotate(180deg);
opacity: 0;
}
35% {
top: 15px;
transform-origin: top left;
transform: translateX(-25px) skewX(0deg)rotate(180deg);
opacity: 1;
}
As you can see the idea is get to almost 180 deg, turn off visibility, get to 180 deg, and turn on visibility. And all this in as few time as posible.
updated fiddle
I have slowed it down so that it is easy to check
About keeping it from spoil other brothers, well, given the IE people ** decision to unprefix that property (I will leave the * space so that everybody can put the adjective that wants), I guess that you should review that design sometime in the future.