Skip to content

Instantly share code, notes, and snippets.

@AlexandraKlein

AlexandraKlein/car-clip-animations

Created February 3, 2017 01:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlexandraKlein/4a340d5ff6291985b055a7145755058b to your computer and use it in GitHub Desktop.
Save AlexandraKlein/4a340d5ff6291985b055a7145755058b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
car-clip-animations
@keyframes carClipTop100 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
5% {
clip: rect(0px, 21px, 420px, 0px);
}
10% {
clip: rect(0px, 28px, 420px, 0px);
}
15% {
clip: rect(0px, 61px, 420px, 0px);
}
20% {
clip: rect(0px, 93px, 420px, 0px);
}
25% {
clip: rect(0px, 114px, 420px, 0px);
}
30% {
clip: rect(0px, 137px, 420px, 0px);
}
35% {
clip: rect(0px, 175px 420px, 0px);
}
40% {
clip: rect(0px, 217px, 420px, 0px);
}
45% {
clip: rect(0px, 253px, 420px, 0px);
}
50% {
clip: rect(0px, 278px, 420px, 0px);
}
55% {
clip: rect(0px, 298px, 420px, 0px);
}
60% {
clip: rect(0px, 318px, 420px, 0px);
}
65% {
clip: rect(0px, 335px, 420px, 0px);
}
70% {
clip: rect(0px, 347px, 420px, 0px);
}
75% {
clip: rect(0px, 357px, 420px, 0px);
}
80% {
clip: rect(0px, 369px, 420px, 0px);
}
85% {
clip: rect(0px, 386px, 420px, 0px);
}
90% {
clip: rect(0px, 404px, 420px, 0px);
}
95% {
clip: rect(0px, 414px, 420px, 0px);
}
100% {
clip: rect(0px, 420px, 420px, 0px);
}
}
@keyframes carClipBottom100 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
5% {
clip: rect(0px, 20px, 420px, 0px);
}
10% {
clip: rect(0px, 40px, 420px, 0px);
}
15% {
clip: rect(0px, 60px, 420px, 0px);
}
20% {
clip: rect(0px, 80px, 420px, 0px);
}
25% {
clip: rect(0px, 100px, 420px, 0px);
}
30% {
clip: rect(0px, 120px, 420px, 0px);
}
35% {
clip: rect(0px, 140px, 420px, 0px);
}
40% {
clip: rect(0px, 160px, 420px, 0px);
}
45% {
clip: rect(0px, 180px, 420px, 0px);
}
50% {
clip: rect(0px, 200px, 420px, 0px);
}
55% {
clip: rect(0px, 220px, 420px, 0px);
}
60% {
clip: rect(0px, 240px, 420px, 0px);
}
65% {
clip: rect(0px, 260px, 420px, 0px);
}
70% {
clip: rect(0px, 280px, 420px, 0px);
}
75% {
clip: rect(0px, 300px, 420px, 0px);
}
80% {
clip: rect(0px, 320px, 420px, 0px);
}
85% {
clip: rect(0px, 340px, 420px, 0px);
}
90% {
clip: rect(0px, 360px, 420px, 0px);
}
95% {
clip: rect(0px, 380px, 420px, 0px);
}
100% {
clip: rect(0px, 420px, 420px, 0px);
}
}
@keyframes carClipTop90 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
5% {
clip: rect(0px, 21px, 420px, 0px);
}
10% {
clip: rect(0px, 28px, 420px, 0px);
}
15% {
clip: rect(0px, 61px, 420px, 0px);
}
20% {
clip: rect(0px, 93px, 420px, 0px);
}
25% {
clip: rect(0px, 114px, 420px, 0px);
}
30% {
clip: rect(0px, 137px, 420px, 0px);
}
35% {
clip: rect(0px, 175px 420px, 0px);
}
40% {
clip: rect(0px, 217px, 420px, 0px);
}
45% {
clip: rect(0px, 253px, 420px, 0px);
}
50% {
clip: rect(0px, 278px, 420px, 0px);
}
55% {
clip: rect(0px, 298px, 420px, 0px);
}
60% {
clip: rect(0px, 318px, 420px, 0px);
}
65% {
clip: rect(0px, 335px, 420px, 0px);
}
70% {
clip: rect(0px, 347px, 420px, 0px);
}
75% {
clip: rect(0px, 357px, 420px, 0px);
}
80% {
clip: rect(0px, 369px, 420px, 0px);
}
100% {
clip: rect(0px, 388px, 420px, 0px);
}
}
@keyframes carClipBottom90 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
5% {
clip: rect(0px, 20px, 420px, 0px);
}
10% {
clip: rect(0px, 40px, 420px, 0px);
}
15% {
clip: rect(0px, 60px, 420px, 0px);
}
20% {
clip: rect(0px, 80px, 420px, 0px);
}
25% {
clip: rect(0px, 100px, 420px, 0px);
}
30% {
clip: rect(0px, 120px, 420px, 0px);
}
35% {
clip: rect(0px, 140px, 420px, 0px);
}
40% {
clip: rect(0px, 160px, 420px, 0px);
}
45% {
clip: rect(0px, 180px, 420px, 0px);
}
50% {
clip: rect(0px, 200px, 420px, 0px);
}
55% {
clip: rect(0px, 220px, 420px, 0px);
}
60% {
clip: rect(0px, 240px, 420px, 0px);
}
65% {
clip: rect(0px, 260px, 420px, 0px);
}
70% {
clip: rect(0px, 280px, 420px, 0px);
}
75% {
clip: rect(0px, 300px, 420px, 0px);
}
80% {
clip: rect(0px, 320px, 420px, 0px);
}
100% {
clip: rect(0px, 340px, 420px, 0px);
}
}
@keyframes carClipTop80 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
6% {
clip: rect(0px, 21px, 420px, 0px);
}
12% {
clip: rect(0px, 28px, 420px, 0px);
}
18% {
clip: rect(0px, 61px, 420px, 0px);
}
24% {
clip: rect(0px, 93px, 420px, 0px);
}
30% {
clip: rect(0px, 114px, 420px, 0px);
}
36% {
clip: rect(0px, 137px, 420px, 0px);
}
42% {
clip: rect(0px, 175px 420px, 0px);
}
48% {
clip: rect(0px, 217px, 420px, 0px);
}
54% {
clip: rect(0px, 253px, 420px, 0px);
}
60% {
clip: rect(0px, 278px, 420px, 0px);
}
66% {
clip: rect(0px, 298px, 420px, 0px);
}
72% {
clip: rect(0px, 318px, 420px, 0px);
}
78% {
clip: rect(0px, 335px, 420px, 0px);
}
84% {
clip: rect(0px, 347px, 420px, 0px);
}
90% {
clip: rect(0px, 357px, 420px, 0px);
}
100% {
clip: rect(0px, 373px, 420px, 0px);
}
}
@keyframes carClipBottom80 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
6% {
clip: rect(0px, 20px, 420px, 0px);
}
12% {
clip: rect(0px, 40px, 420px, 0px);
}
18% {
clip: rect(0px, 60px, 420px, 0px);
}
24% {
clip: rect(0px, 80px, 420px, 0px);
}
30% {
clip: rect(0px, 100px, 420px, 0px);
}
36% {
clip: rect(0px, 120px, 420px, 0px);
}
42% {
clip: rect(0px, 140px, 420px, 0px);
}
48% {
clip: rect(0px, 160px, 420px, 0px);
}
54% {
clip: rect(0px, 180px, 420px, 0px);
}
60% {
clip: rect(0px, 200px, 420px, 0px);
}
66% {
clip: rect(0px, 220px, 420px, 0px);
}
72% {
clip: rect(0px, 240px, 420px, 0px);
}
78% {
clip: rect(0px, 260px, 420px, 0px);
}
84% {
clip: rect(0px, 280px, 420px, 0px);
}
90% {
clip: rect(0px, 300px, 420px, 0px);
}
100% {
clip: rect(0px, 320px, 420px, 0px);
}
}
@keyframes carClipTop70 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
7% {
clip: rect(0px, 21px, 420px, 0px);
}
14% {
clip: rect(0px, 28px, 420px, 0px);
}
21% {
clip: rect(0px, 61px, 420px, 0px);
}
28% {
clip: rect(0px, 93px, 420px, 0px);
}
35% {
clip: rect(0px, 114px, 420px, 0px);
}
42% {
clip: rect(0px, 137px, 420px, 0px);
}
49% {
clip: rect(0px, 175px 420px, 0px);
}
56% {
clip: rect(0px, 217px, 420px, 0px);
}
63% {
clip: rect(0px, 253px, 420px, 0px);
}
70% {
clip: rect(0px, 278px, 420px, 0px);
}
77% {
clip: rect(0px, 298px, 420px, 0px);
}
84% {
clip: rect(0px, 318px, 420px, 0px);
}
91% {
clip: rect(0px, 335px, 420px, 0px);
}
100% {
clip: rect(0px, 347px, 420px, 0px);
}
}
@keyframes carClipBottom70 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
7% {
clip: rect(0px, 20px, 420px, 0px);
}
14% {
clip: rect(0px, 40px, 420px, 0px);
}
21% {
clip: rect(0px, 60px, 420px, 0px);
}
28% {
clip: rect(0px, 80px, 420px, 0px);
}
35% {
clip: rect(0px, 100px, 420px, 0px);
}
42% {
clip: rect(0px, 120px, 420px, 0px);
}
49% {
clip: rect(0px, 140px, 420px, 0px);
}
56% {
clip: rect(0px, 160px, 420px, 0px);
}
63% {
clip: rect(0px, 180px, 420px, 0px);
}
70% {
clip: rect(0px, 200px, 420px, 0px);
}
77% {
clip: rect(0px, 220px, 420px, 0px);
}
84% {
clip: rect(0px, 240px, 420px, 0px);
}
91% {
clip: rect(0px, 255px, 420px, 0px);
}
100% {
clip: rect(0px, 272px, 420px, 0px);
}
}
@keyframes carClipTop60 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
8% {
clip: rect(0px, 21px, 420px, 0px);
}
16% {
clip: rect(0px, 28px, 420px, 0px);
}
24% {
clip: rect(0px, 61px, 420px, 0px);
}
32% {
clip: rect(0px, 93px, 420px, 0px);
}
40% {
clip: rect(0px, 114px, 420px, 0px);
}
48% {
clip: rect(0px, 137px, 420px, 0px);
}
56% {
clip: rect(0px, 175px 420px, 0px);
}
64% {
clip: rect(0px, 217px, 420px, 0px);
}
72% {
clip: rect(0px, 253px, 420px, 0px);
}
80% {
clip: rect(0px, 278px, 420px, 0px);
}
88% {
clip: rect(0px, 298px, 420px, 0px);
}
96% {
clip: rect(0px, 318px, 420px, 0px);
}
100% {
clip: rect(0px, 329px, 420px, 0px);
}
}
@keyframes carClipBottom60 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
8% {
clip: rect(0px, 20px, 420px, 0px);
}
16% {
clip: rect(0px, 40px, 420px, 0px);
}
24% {
clip: rect(0px, 60px, 420px, 0px);
}
32% {
clip: rect(0px, 80px, 420px, 0px);
}
40% {
clip: rect(0px, 100px, 420px, 0px);
}
48% {
clip: rect(0px, 120px, 420px, 0px);
}
56% {
clip: rect(0px, 140px, 420px, 0px);
}
64% {
clip: rect(0px, 160px, 420px, 0px);
}
72% {
clip: rect(0px, 180px, 420px, 0px);
}
80% {
clip: rect(0px, 200px, 420px, 0px);
}
88% {
clip: rect(0px, 220px, 420px, 0px);
}
96% {
clip: rect(0px, 240px, 420px, 0px);
}
100% {
clip: rect(0px, 250px, 420px, 0px);
}
}
@keyframes carClipTop50 {
8% {
clip: rect(0px, 0px, 420px, 0px);
}
16% {
clip: rect(0px, 21px, 420px, 0px);
}
24% {
clip: rect(0px, 28px, 420px, 0px);
}
32% {
clip: rect(0px, 61px, 420px, 0px);
}
40% {
clip: rect(0px, 93px, 420px, 0px);
}
48% {
clip: rect(0px, 114px, 420px, 0px);
}
56% {
clip: rect(0px, 137px, 420px, 0px);
}
64% {
clip: rect(0px, 175px 420px, 0px);
}
72% {
clip: rect(0px, 217px, 420px, 0px);
}
80% {
clip: rect(0px, 253px, 420px, 0px);
}
88% {
clip: rect(0px, 278px, 420px, 0px);
}
100% {
clip: rect(0px, 298px, 420px, 0px);
}
}
@keyframes carClipBottom50 {
8% {
clip: rect(0px, 0px, 420px, 0px);
}
16% {
clip: rect(0px, 20px, 420px, 0px);
}
24% {
clip: rect(0px, 40px, 420px, 0px);
}
32% {
clip: rect(0px, 60px, 420px, 0px);
}
40% {
clip: rect(0px, 80px, 420px, 0px);
}
48% {
clip: rect(0px, 100px, 420px, 0px);
}
56% {
clip: rect(0px, 120px, 420px, 0px);
}
64% {
clip: rect(0px, 140px, 420px, 0px);
}
72% {
clip: rect(0px, 160px, 420px, 0px);
}
80% {
clip: rect(0px, 180px, 420px, 0px);
}
88% {
clip: rect(0px, 200px, 420px, 0px);
}
100% {
clip: rect(0px, 220px, 420px, 0px);
}
}
@keyframes carClipTop40 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
25% {
clip: rect(0px, 40px, 420px, 0px);
}
50% {
clip: rect(0px, 80px, 420px, 0px);
}
65% {
clip: rect(0px, 120px, 420px, 0px);
}
75% {
clip: rect(0px, 160px, 420px, 0px);
}
85% {
clip: rect(0px, 195px, 420px, 0px);
}
100% {
clip: rect(0px, 210px, 420px, 0px);
}
}
@keyframes carClipBottom40 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
25% {
clip: rect(0px, 51px, 420px, 0px);
}
50% {
clip: rect(0px, 75px, 420px, 0px);
}
65% {
clip: rect(0px, 106px, 420px, 0px);
}
75% {
clip: rect(0px, 137px, 420px, 0px);
}
85% {
clip: rect(0px, 153px, 420px, 0px);
}
100% {
clip: rect(0px, 170px, 420px, 0px);
}
}
@keyframes carClipTop30 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
50% {
clip: rect(0px, 50px, 420px, 0px);
}
100% {
clip: rect(0px, 145px, 420px, 0px);
}
}
@keyframes carClipBottom30 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
50% {
clip: rect(0px, 50px, 420px, 0px);
}
100% {
clip: rect(0px, 128px, 420px, 0px);
}
}
@keyframes carClipTop20 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
50% {
clip: rect(0px, 50px, 420px, 0px);
}
100% {
clip: rect(0px, 118px, 420px, 0px);
}
}
@keyframes carClipBottom20 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
50% {
clip: rect(0px, 50px, 420px, 0px);
}
100% {
clip: rect(0px, 105px, 420px, 0px);
}
}
@keyframes carClipTop10 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
50% {
clip: rect(0px, 21px, 420px, 0px);
}
100% {
clip: rect(0px, 84px, 420px, 0px);
}
}
@keyframes carClipBottom10 {
0% {
clip: rect(0px, 0px, 420px, 0px);
}
50% {
clip: rect(0px, 20px, 420px, 0px);
}
100% {
clip: rect(0px, 80px, 420px, 0px);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment