Skip to content

Instantly share code, notes, and snippets.

@chindraba-work

chindraba-work/color-swiper.css

Last active September 11, 2020 09: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 chindraba-work/534644c20159516ac1b5b54e414eff21 to your computer and use it in GitHub Desktop.
Save chindraba-work/534644c20159516ac1b5b54e414eff21 to your computer and use it in GitHub Desktop.
Download ZIP
Change the background color of an element by swiping a band across it.
Raw
color-swiper.css
@keyframes color-swipe-in {
0% {background-image: linear-gradient(var(--cs-deg),var(--cs-old), var(--cs-old) 0%, var(--cs-old) 0%, var(--cs-old));}
1% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 1%, var(--cs-old) 1%, var(--cs-old));}
2% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 2%, var(--cs-old) 2%, var(--cs-old));}
3% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 3%, var(--cs-old) 3%, var(--cs-old));}
4% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 4%, var(--cs-old) 4%, var(--cs-old));}
5% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 5%, var(--cs-old) 5%, var(--cs-old));}
6% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 6%, var(--cs-old) 6%, var(--cs-old));}
7% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 7%, var(--cs-old) 7%, var(--cs-old));}
8% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 8%, var(--cs-old) 8%, var(--cs-old));}
9% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 9%, var(--cs-old) 9%, var(--cs-old));}
10% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 10%, var(--cs-old) 10%, var(--cs-old));}
11% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 11%, var(--cs-old) 11%, var(--cs-old));}
12% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 12%, var(--cs-old) 12%, var(--cs-old));}
13% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 13%, var(--cs-old) 13%, var(--cs-old));}
14% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 14%, var(--cs-old) 14%, var(--cs-old));}
15% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 15%, var(--cs-old) 15%, var(--cs-old));}
16% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 16%, var(--cs-old) 16%, var(--cs-old));}
17% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 17%, var(--cs-old) 17%, var(--cs-old));}
18% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 18%, var(--cs-old) 18%, var(--cs-old));}
19% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 19%, var(--cs-old) 19%, var(--cs-old));}
10% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 10%, var(--cs-old) 10%, var(--cs-old));}
21% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 21%, var(--cs-old) 21%, var(--cs-old));}
22% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 22%, var(--cs-old) 22%, var(--cs-old));}
23% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 23%, var(--cs-old) 23%, var(--cs-old));}
24% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 24%, var(--cs-old) 24%, var(--cs-old));}
25% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 25%, var(--cs-old) 25%, var(--cs-old));}
26% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 26%, var(--cs-old) 26%, var(--cs-old));}
27% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 27%, var(--cs-old) 27%, var(--cs-old));}
28% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 28%, var(--cs-old) 28%, var(--cs-old));}
29% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 29%, var(--cs-old) 29%, var(--cs-old));}
30% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 30%, var(--cs-old) 30%, var(--cs-old));}
31% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 31%, var(--cs-old) 31%, var(--cs-old));}
32% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 32%, var(--cs-old) 32%, var(--cs-old));}
33% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 33%, var(--cs-old) 33%, var(--cs-old));}
34% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 34%, var(--cs-old) 34%, var(--cs-old));}
35% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 35%, var(--cs-old) 35%, var(--cs-old));}
36% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 36%, var(--cs-old) 36%, var(--cs-old));}
37% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 37%, var(--cs-old) 37%, var(--cs-old));}
38% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 38%, var(--cs-old) 38%, var(--cs-old));}
39% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 39%, var(--cs-old) 39%, var(--cs-old));}
40% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 40%, var(--cs-old) 40%, var(--cs-old));}
41% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 41%, var(--cs-old) 41%, var(--cs-old));}
42% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 42%, var(--cs-old) 42%, var(--cs-old));}
43% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 43%, var(--cs-old) 43%, var(--cs-old));}
44% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 44%, var(--cs-old) 44%, var(--cs-old));}
45% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 45%, var(--cs-old) 45%, var(--cs-old));}
46% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 46%, var(--cs-old) 46%, var(--cs-old));}
47% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 47%, var(--cs-old) 47%, var(--cs-old));}
48% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 48%, var(--cs-old) 48%, var(--cs-old));}
49% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 49%, var(--cs-old) 49%, var(--cs-old));}
50% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 50%, var(--cs-old) 50%, var(--cs-old));}
51% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 51%, var(--cs-old) 51%, var(--cs-old));}
52% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 52%, var(--cs-old) 52%, var(--cs-old));}
53% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 53%, var(--cs-old) 53%, var(--cs-old));}
54% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 54%, var(--cs-old) 54%, var(--cs-old));}
55% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 55%, var(--cs-old) 55%, var(--cs-old));}
56% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 56%, var(--cs-old) 56%, var(--cs-old));}
57% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 57%, var(--cs-old) 57%, var(--cs-old));}
58% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 58%, var(--cs-old) 58%, var(--cs-old));}
59% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 59%, var(--cs-old) 59%, var(--cs-old));}
60% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 60%, var(--cs-old) 60%, var(--cs-old));}
61% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 61%, var(--cs-old) 61%, var(--cs-old));}
62% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 62%, var(--cs-old) 62%, var(--cs-old));}
63% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 63%, var(--cs-old) 63%, var(--cs-old));}
64% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 64%, var(--cs-old) 64%, var(--cs-old));}
65% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 65%, var(--cs-old) 65%, var(--cs-old));}
66% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 66%, var(--cs-old) 66%, var(--cs-old));}
67% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 67%, var(--cs-old) 67%, var(--cs-old));}
68% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 68%, var(--cs-old) 68%, var(--cs-old));}
69% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 69%, var(--cs-old) 69%, var(--cs-old));}
70% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 70%, var(--cs-old) 70%, var(--cs-old));}
71% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 71%, var(--cs-old) 71%, var(--cs-old));}
72% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 72%, var(--cs-old) 72%, var(--cs-old));}
73% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 73%, var(--cs-old) 73%, var(--cs-old));}
74% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 74%, var(--cs-old) 74%, var(--cs-old));}
75% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 75%, var(--cs-old) 75%, var(--cs-old));}
76% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 76%, var(--cs-old) 76%, var(--cs-old));}
77% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 77%, var(--cs-old) 77%, var(--cs-old));}
78% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 78%, var(--cs-old) 78%, var(--cs-old));}
79% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 79%, var(--cs-old) 79%, var(--cs-old));}
80% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 80%, var(--cs-old) 80%, var(--cs-old));}
81% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 81%, var(--cs-old) 81%, var(--cs-old));}
82% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 82%, var(--cs-old) 82%, var(--cs-old));}
83% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 83%, var(--cs-old) 83%, var(--cs-old));}
84% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 84%, var(--cs-old) 84%, var(--cs-old));}
85% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 85%, var(--cs-old) 85%, var(--cs-old));}
86% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 86%, var(--cs-old) 86%, var(--cs-old));}
87% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 87%, var(--cs-old) 87%, var(--cs-old));}
88% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 88%, var(--cs-old) 88%, var(--cs-old));}
89% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 89%, var(--cs-old) 89%, var(--cs-old));}
90% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 90%, var(--cs-old) 90%, var(--cs-old));}
91% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 91%, var(--cs-old) 91%, var(--cs-old));}
92% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 92%, var(--cs-old) 92%, var(--cs-old));}
93% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 93%, var(--cs-old) 93%, var(--cs-old));}
94% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 94%, var(--cs-old) 94%, var(--cs-old));}
95% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 95%, var(--cs-old) 95%, var(--cs-old));}
96% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 96%, var(--cs-old) 96%, var(--cs-old));}
97% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 97%, var(--cs-old) 97%, var(--cs-old));}
98% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 98%, var(--cs-old) 98%, var(--cs-old));}
99% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 99%, var(--cs-old) 99%, var(--cs-old));}
100% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new)100%, var(--cs-new)100%, var(--cs-new));}
}
@keyframes color-swipe-out {
0% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new)100%, var(--cs-new)100%, var(--cs-new));}
1% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 99%, var(--cs-old) 99%, var(--cs-old));}
2% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 98%, var(--cs-old) 98%, var(--cs-old));}
3% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 97%, var(--cs-old) 97%, var(--cs-old));}
4% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 96%, var(--cs-old) 96%, var(--cs-old));}
5% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 95%, var(--cs-old) 95%, var(--cs-old));}
6% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 94%, var(--cs-old) 94%, var(--cs-old));}
7% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 93%, var(--cs-old) 93%, var(--cs-old));}
8% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 92%, var(--cs-old) 92%, var(--cs-old));}
9% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 91%, var(--cs-old) 91%, var(--cs-old));}
10% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 90%, var(--cs-old) 90%, var(--cs-old));}
11% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 89%, var(--cs-old) 89%, var(--cs-old));}
12% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 88%, var(--cs-old) 88%, var(--cs-old));}
13% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 87%, var(--cs-old) 87%, var(--cs-old));}
14% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 86%, var(--cs-old) 86%, var(--cs-old));}
15% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 85%, var(--cs-old) 85%, var(--cs-old));}
16% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 84%, var(--cs-old) 84%, var(--cs-old));}
17% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 83%, var(--cs-old) 83%, var(--cs-old));}
18% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 82%, var(--cs-old) 82%, var(--cs-old));}
19% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 81%, var(--cs-old) 81%, var(--cs-old));}
10% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 80%, var(--cs-old) 80%, var(--cs-old));}
21% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 79%, var(--cs-old) 79%, var(--cs-old));}
22% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 78%, var(--cs-old) 78%, var(--cs-old));}
23% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 77%, var(--cs-old) 77%, var(--cs-old));}
24% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 76%, var(--cs-old) 76%, var(--cs-old));}
25% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 75%, var(--cs-old) 75%, var(--cs-old));}
26% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 74%, var(--cs-old) 74%, var(--cs-old));}
27% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 73%, var(--cs-old) 73%, var(--cs-old));}
28% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 72%, var(--cs-old) 72%, var(--cs-old));}
29% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 71%, var(--cs-old) 71%, var(--cs-old));}
30% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 70%, var(--cs-old) 70%, var(--cs-old));}
31% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 69%, var(--cs-old) 69%, var(--cs-old));}
32% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 68%, var(--cs-old) 68%, var(--cs-old));}
33% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 67%, var(--cs-old) 67%, var(--cs-old));}
34% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 66%, var(--cs-old) 66%, var(--cs-old));}
35% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 65%, var(--cs-old) 65%, var(--cs-old));}
36% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 64%, var(--cs-old) 64%, var(--cs-old));}
37% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 63%, var(--cs-old) 63%, var(--cs-old));}
38% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 62%, var(--cs-old) 62%, var(--cs-old));}
39% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 61%, var(--cs-old) 61%, var(--cs-old));}
40% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 60%, var(--cs-old) 60%, var(--cs-old));}
41% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 59%, var(--cs-old) 59%, var(--cs-old));}
42% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 58%, var(--cs-old) 58%, var(--cs-old));}
43% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 57%, var(--cs-old) 57%, var(--cs-old));}
44% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 56%, var(--cs-old) 56%, var(--cs-old));}
45% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 55%, var(--cs-old) 55%, var(--cs-old));}
46% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 54%, var(--cs-old) 54%, var(--cs-old));}
47% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 53%, var(--cs-old) 53%, var(--cs-old));}
48% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 52%, var(--cs-old) 52%, var(--cs-old));}
49% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 51%, var(--cs-old) 51%, var(--cs-old));}
50% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 50%, var(--cs-old) 50%, var(--cs-old));}
51% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 49%, var(--cs-old) 49%, var(--cs-old));}
52% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 48%, var(--cs-old) 48%, var(--cs-old));}
53% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 47%, var(--cs-old) 47%, var(--cs-old));}
54% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 46%, var(--cs-old) 46%, var(--cs-old));}
55% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 45%, var(--cs-old) 45%, var(--cs-old));}
56% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 44%, var(--cs-old) 44%, var(--cs-old));}
57% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 43%, var(--cs-old) 43%, var(--cs-old));}
58% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 42%, var(--cs-old) 42%, var(--cs-old));}
59% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 41%, var(--cs-old) 41%, var(--cs-old));}
60% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 40%, var(--cs-old) 40%, var(--cs-old));}
61% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 39%, var(--cs-old) 39%, var(--cs-old));}
62% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 38%, var(--cs-old) 38%, var(--cs-old));}
63% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 37%, var(--cs-old) 37%, var(--cs-old));}
64% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 36%, var(--cs-old) 36%, var(--cs-old));}
65% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 35%, var(--cs-old) 35%, var(--cs-old));}
66% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 34%, var(--cs-old) 34%, var(--cs-old));}
67% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 33%, var(--cs-old) 33%, var(--cs-old));}
68% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 32%, var(--cs-old) 32%, var(--cs-old));}
69% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 31%, var(--cs-old) 31%, var(--cs-old));}
70% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 30%, var(--cs-old) 30%, var(--cs-old));}
71% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 29%, var(--cs-old) 29%, var(--cs-old));}
72% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 28%, var(--cs-old) 28%, var(--cs-old));}
73% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 27%, var(--cs-old) 27%, var(--cs-old));}
74% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 26%, var(--cs-old) 26%, var(--cs-old));}
75% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 25%, var(--cs-old) 25%, var(--cs-old));}
76% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 24%, var(--cs-old) 24%, var(--cs-old));}
77% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 23%, var(--cs-old) 23%, var(--cs-old));}
78% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 22%, var(--cs-old) 22%, var(--cs-old));}
79% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 21%, var(--cs-old) 21%, var(--cs-old));}
80% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 19%, var(--cs-old) 19%, var(--cs-old));}
81% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 18%, var(--cs-old) 18%, var(--cs-old));}
82% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 17%, var(--cs-old) 17%, var(--cs-old));}
83% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 16%, var(--cs-old) 16%, var(--cs-old));}
84% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 15%, var(--cs-old) 15%, var(--cs-old));}
85% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 14%, var(--cs-old) 14%, var(--cs-old));}
86% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 13%, var(--cs-old) 13%, var(--cs-old));}
87% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 12%, var(--cs-old) 12%, var(--cs-old));}
88% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 11%, var(--cs-old) 11%, var(--cs-old));}
89% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 10%, var(--cs-old) 10%, var(--cs-old));}
90% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 10%, var(--cs-old) 10%, var(--cs-old));}
91% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 9%, var(--cs-old) 9%, var(--cs-old));}
92% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 8%, var(--cs-old) 8%, var(--cs-old));}
93% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 7%, var(--cs-old) 7%, var(--cs-old));}
94% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 6%, var(--cs-old) 6%, var(--cs-old));}
95% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 5%, var(--cs-old) 5%, var(--cs-old));}
96% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 4%, var(--cs-old) 4%, var(--cs-old));}
97% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 3%, var(--cs-old) 3%, var(--cs-old));}
98% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 2%, var(--cs-old) 2%, var(--cs-old));}
99% {background-image: linear-gradient(var(--cs-deg),var(--cs-new), var(--cs-new) 1%, var(--cs-old) 1%, var(--cs-old));}
100% {background-image: linear-gradient(var(--cs-deg),var(--cs-old), var(--cs-old) 0%, var(--cs-old) 0%, var(--cs-old));}
}
:root {
--cs-old: goldenrod; /* The static color */
--cs-new: darkgreen; /* The hover color */
--cs-deg: -195deg; /* The direction of the swipe */
--cs-sec: 1s; /* The transition time of the swipe */
}
#color-swipe-target {
background-color: var(--cs-old);
animation: color-swipe-out var(--cs-sec) linear;
}
#color-swipe-target:hover {
background-color: var(--cs-new);
animation: color-swipe-in var(--cs-sec) linear;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment