Skip to content

Instantly share code, notes, and snippets.

@timrwood
Created November 28, 2012 17:49
Show Gist options
  • Save timrwood/4162844 to your computer and use it in GitHub Desktop.
Save timrwood/4162844 to your computer and use it in GitHub Desktop.
.stylie {
animation-name: stylie-transform-keyframes;
animation-duration: 2000ms;
animation-delay: 0ms;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
@keyframes stylie-transform-keyframes {
0% {transform:translateX(40px) translateY(519px) rotate(0deg);}
1% {transform:translateX(40.0722px) translateY(519.039px) rotate(0deg);}
2% {transform:translateX(40.2888px) translateY(519.156px) rotate(0deg);}
3% {transform:translateX(40.6498px) translateY(519.351px) rotate(0deg);}
4% {transform:translateX(41.1552px) translateY(519.624px) rotate(0deg);}
5% {transform:translateX(41.805px) translateY(519.975px) rotate(0deg);}
6% {transform:translateX(42.5992px) translateY(520.404px) rotate(0deg);}
7% {transform:translateX(43.5378px) translateY(520.911px) rotate(0deg);}
8% {transform:translateX(44.6208px) translateY(521.496px) rotate(0deg);}
9% {transform:translateX(45.8482px) translateY(522.159px) rotate(0deg);}
10% {transform:translateX(47.22px) translateY(522.9px) rotate(0deg);}
11% {transform:translateX(48.7362px) translateY(523.719px) rotate(0deg);}
12% {transform:translateX(50.3968px) translateY(524.616px) rotate(0deg);}
13% {transform:translateX(52.2018px) translateY(525.591px) rotate(0deg);}
14% {transform:translateX(54.1512px) translateY(526.644px) rotate(0deg);}
15% {transform:translateX(56.245px) translateY(527.775px) rotate(0deg);}
16% {transform:translateX(58.4832px) translateY(528.984px) rotate(0deg);}
17% {transform:translateX(60.8658px) translateY(530.271px) rotate(0deg);}
18% {transform:translateX(63.3928px) translateY(531.636px) rotate(0deg);}
19% {transform:translateX(66.0642px) translateY(533.079px) rotate(0deg);}
20% {transform:translateX(68.88px) translateY(534.6px) rotate(0deg);}
21% {transform:translateX(71.8402px) translateY(536.199px) rotate(0deg);}
22% {transform:translateX(74.9448px) translateY(537.876px) rotate(0deg);}
23% {transform:translateX(78.1938px) translateY(539.631px) rotate(0deg);}
24% {transform:translateX(81.5872px) translateY(541.464px) rotate(0deg);}
25% {transform:translateX(85.125px) translateY(543.375px) rotate(0deg);}
26% {transform:translateX(88.8072px) translateY(545.364px) rotate(0deg);}
27% {transform:translateX(92.6338px) translateY(547.431px) rotate(0deg);}
28% {transform:translateX(96.6048px) translateY(549.576px) rotate(0deg);}
29% {transform:translateX(100.7202px) translateY(551.799px) rotate(0deg);}
30% {transform:translateX(104.98px) translateY(554.1px) rotate(0deg);}
31% {transform:translateX(109.3842px) translateY(556.479px) rotate(0deg);}
32% {transform:translateX(113.9328px) translateY(558.936px) rotate(0deg);}
33% {transform:translateX(118.6258px) translateY(561.471px) rotate(0deg);}
34% {transform:translateX(123.4632px) translateY(564.084px) rotate(0deg);}
35% {transform:translateX(128.445px) translateY(566.775px) rotate(0deg);}
36% {transform:translateX(133.5712px) translateY(569.544px) rotate(0deg);}
37% {transform:translateX(138.8418px) translateY(572.391px) rotate(0deg);}
38% {transform:translateX(144.2568px) translateY(575.316px) rotate(0deg);}
39% {transform:translateX(149.8162px) translateY(578.319px) rotate(0deg);}
40% {transform:translateX(155.52px) translateY(581.4px) rotate(0deg);}
41% {transform:translateX(161.3682px) translateY(584.559px) rotate(0deg);}
42% {transform:translateX(167.3608px) translateY(587.796px) rotate(0deg);}
43% {transform:translateX(173.4978px) translateY(591.111px) rotate(0deg);}
44% {transform:translateX(179.7792px) translateY(594.504px) rotate(0deg);}
45% {transform:translateX(186.205px) translateY(597.975px) rotate(0deg);}
46% {transform:translateX(192.7752px) translateY(601.524px) rotate(0deg);}
47% {transform:translateX(199.4898px) translateY(605.151px) rotate(0deg);}
48% {transform:translateX(206.3488px) translateY(608.856px) rotate(0deg);}
49% {transform:translateX(213.3522px) translateY(612.639px) rotate(0deg);}
50% {transform:translateX(220.5px) translateY(616.5px) rotate(0deg);}
51% {transform:translateX(227.7922px) translateY(620.361px) rotate(0deg);}
52% {transform:translateX(235.2288px) translateY(624.144px) rotate(0deg);}
53% {transform:translateX(242.8098px) translateY(627.849px) rotate(0deg);}
54% {transform:translateX(250.5352px) translateY(631.476px) rotate(0deg);}
55% {transform:translateX(258.405px) translateY(635.025px) rotate(0deg);}
56% {transform:translateX(266.4192px) translateY(638.496px) rotate(0deg);}
57% {transform:translateX(274.5778px) translateY(641.889px) rotate(0deg);}
58% {transform:translateX(282.8808px) translateY(645.204px) rotate(0deg);}
59% {transform:translateX(291.3282px) translateY(648.441px) rotate(0deg);}
60% {transform:translateX(299.92px) translateY(651.6px) rotate(0deg);}
61% {transform:translateX(308.6562px) translateY(654.681px) rotate(0deg);}
62% {transform:translateX(317.5368px) translateY(657.684px) rotate(0deg);}
63% {transform:translateX(326.5618px) translateY(660.609px) rotate(0deg);}
64% {transform:translateX(335.7312px) translateY(663.456px) rotate(0deg);}
65% {transform:translateX(345.045px) translateY(666.225px) rotate(0deg);}
66% {transform:translateX(354.5032px) translateY(668.916px) rotate(0deg);}
67% {transform:translateX(364.1058px) translateY(671.529px) rotate(0deg);}
68% {transform:translateX(373.8528px) translateY(674.064px) rotate(0deg);}
69% {transform:translateX(383.7442px) translateY(676.521px) rotate(0deg);}
70% {transform:translateX(393.78px) translateY(678.9px) rotate(0deg);}
71% {transform:translateX(403.9602px) translateY(681.201px) rotate(0deg);}
72% {transform:translateX(414.2848px) translateY(683.424px) rotate(0deg);}
73% {transform:translateX(424.7538px) translateY(685.569px) rotate(0deg);}
74% {transform:translateX(435.3672px) translateY(687.636px) rotate(0deg);}
75% {transform:translateX(446.125px) translateY(689.625px) rotate(0deg);}
76% {transform:translateX(457.0272px) translateY(691.536px) rotate(0deg);}
77% {transform:translateX(468.0738px) translateY(693.369px) rotate(0deg);}
78% {transform:translateX(479.2648px) translateY(695.124px) rotate(0deg);}
79% {transform:translateX(490.6002px) translateY(696.801px) rotate(0deg);}
80% {transform:translateX(502.08px) translateY(698.4px) rotate(0deg);}
81% {transform:translateX(513.7042px) translateY(699.921px) rotate(0deg);}
82% {transform:translateX(525.4728px) translateY(701.364px) rotate(0deg);}
83% {transform:translateX(537.3858px) translateY(702.729px) rotate(0deg);}
84% {transform:translateX(549.4432px) translateY(704.016px) rotate(0deg);}
85% {transform:translateX(561.645px) translateY(705.225px) rotate(0deg);}
86% {transform:translateX(573.9912px) translateY(706.356px) rotate(0deg);}
87% {transform:translateX(586.4818px) translateY(707.409px) rotate(0deg);}
88% {transform:translateX(599.1168px) translateY(708.384px) rotate(0deg);}
89% {transform:translateX(611.8962px) translateY(709.281px) rotate(0deg);}
90% {transform:translateX(624.82px) translateY(710.1px) rotate(0deg);}
91% {transform:translateX(637.8882px) translateY(710.841px) rotate(0deg);}
92% {transform:translateX(651.1008px) translateY(711.504px) rotate(0deg);}
93% {transform:translateX(664.4578px) translateY(712.089px) rotate(0deg);}
94% {transform:translateX(677.9592px) translateY(712.596px) rotate(0deg);}
95% {transform:translateX(691.605px) translateY(713.025px) rotate(0deg);}
96% {transform:translateX(705.3952px) translateY(713.376px) rotate(0deg);}
97% {transform:translateX(719.3298px) translateY(713.649px) rotate(0deg);}
98% {transform:translateX(733.4088px) translateY(713.844px) rotate(0deg);}
99% {transform:translateX(747.6322px) translateY(713.961px) rotate(0deg);}
100% {transform:translateX(762px) translateY(714px) rotate(0deg);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment