Skip to content

Instantly share code, notes, and snippets.

@azinit
Created June 27, 2022 15:06
Show Gist options
  • Save azinit/6477b2adf6e49b9151375e176bf7f8c8 to your computer and use it in GitHub Desktop.
Save azinit/6477b2adf6e49b9151375e176bf7f8c8 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@keyframes rotation {
@for $i from 0 through 47 {
#{$i / 47 * 100}% {
background-position: calc(#{$i} * -464px) 0;
}
}
}
// background-image: url("./assets/rotation/coin_rotation_2s#{$i}.jpg");
@keyframes rotation {
0% {
background-position: calc(0 * -464px) 0;
}
2.1276595745% {
background-position: calc(1 * -464px) 0;
}
4.2553191489% {
background-position: calc(2 * -464px) 0;
}
6.3829787234% {
background-position: calc(3 * -464px) 0;
}
8.5106382979% {
background-position: calc(4 * -464px) 0;
}
10.6382978723% {
background-position: calc(5 * -464px) 0;
}
12.7659574468% {
background-position: calc(6 * -464px) 0;
}
14.8936170213% {
background-position: calc(7 * -464px) 0;
}
17.0212765957% {
background-position: calc(8 * -464px) 0;
}
19.1489361702% {
background-position: calc(9 * -464px) 0;
}
21.2765957447% {
background-position: calc(10 * -464px) 0;
}
23.4042553191% {
background-position: calc(11 * -464px) 0;
}
25.5319148936% {
background-position: calc(12 * -464px) 0;
}
27.6595744681% {
background-position: calc(13 * -464px) 0;
}
29.7872340426% {
background-position: calc(14 * -464px) 0;
}
31.914893617% {
background-position: calc(15 * -464px) 0;
}
34.0425531915% {
background-position: calc(16 * -464px) 0;
}
36.170212766% {
background-position: calc(17 * -464px) 0;
}
38.2978723404% {
background-position: calc(18 * -464px) 0;
}
40.4255319149% {
background-position: calc(19 * -464px) 0;
}
42.5531914894% {
background-position: calc(20 * -464px) 0;
}
44.6808510638% {
background-position: calc(21 * -464px) 0;
}
46.8085106383% {
background-position: calc(22 * -464px) 0;
}
48.9361702128% {
background-position: calc(23 * -464px) 0;
}
51.0638297872% {
background-position: calc(24 * -464px) 0;
}
53.1914893617% {
background-position: calc(25 * -464px) 0;
}
55.3191489362% {
background-position: calc(26 * -464px) 0;
}
57.4468085106% {
background-position: calc(27 * -464px) 0;
}
59.5744680851% {
background-position: calc(28 * -464px) 0;
}
61.7021276596% {
background-position: calc(29 * -464px) 0;
}
63.829787234% {
background-position: calc(30 * -464px) 0;
}
65.9574468085% {
background-position: calc(31 * -464px) 0;
}
68.085106383% {
background-position: calc(32 * -464px) 0;
}
70.2127659574% {
background-position: calc(33 * -464px) 0;
}
72.3404255319% {
background-position: calc(34 * -464px) 0;
}
74.4680851064% {
background-position: calc(35 * -464px) 0;
}
76.5957446809% {
background-position: calc(36 * -464px) 0;
}
78.7234042553% {
background-position: calc(37 * -464px) 0;
}
80.8510638298% {
background-position: calc(38 * -464px) 0;
}
82.9787234043% {
background-position: calc(39 * -464px) 0;
}
85.1063829787% {
background-position: calc(40 * -464px) 0;
}
87.2340425532% {
background-position: calc(41 * -464px) 0;
}
89.3617021277% {
background-position: calc(42 * -464px) 0;
}
91.4893617021% {
background-position: calc(43 * -464px) 0;
}
93.6170212766% {
background-position: calc(44 * -464px) 0;
}
95.7446808511% {
background-position: calc(45 * -464px) 0;
}
97.8723404255% {
background-position: calc(46 * -464px) 0;
}
100% {
background-position: calc(47 * -464px) 0;
}
}
{
"sass": {
"compiler": "dart-sass/1.32.12",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment