Last active
September 11, 2020 09:05
-
-
Save chindraba-work/ca3700eab298b8b48c2811c2f2cae3fc to your computer and use it in GitHub Desktop.
Change the background color of an element by washing a gradient across it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @keyframes color-creep-in { | |
| 0% {background-image: linear-gradient(var(--cc-deg),var(--cc-old), 0%, var(--cc-old));} | |
| 1% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 1%, var(--cc-old));} | |
| 2% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 2%, var(--cc-old));} | |
| 3% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 3%, var(--cc-old));} | |
| 4% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 4%, var(--cc-old));} | |
| 5% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 5%, var(--cc-old));} | |
| 6% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 6%, var(--cc-old));} | |
| 7% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 7%, var(--cc-old));} | |
| 8% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 8%, var(--cc-old));} | |
| 9% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 9%, var(--cc-old));} | |
| 10% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 10%, var(--cc-old));} | |
| 11% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 11%, var(--cc-old));} | |
| 12% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 12%, var(--cc-old));} | |
| 13% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 13%, var(--cc-old));} | |
| 14% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 14%, var(--cc-old));} | |
| 15% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 15%, var(--cc-old));} | |
| 16% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 16%, var(--cc-old));} | |
| 17% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 17%, var(--cc-old));} | |
| 18% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 18%, var(--cc-old));} | |
| 19% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 19%, var(--cc-old));} | |
| 10% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 10%, var(--cc-old));} | |
| 21% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 21%, var(--cc-old));} | |
| 22% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 22%, var(--cc-old));} | |
| 23% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 23%, var(--cc-old));} | |
| 24% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 24%, var(--cc-old));} | |
| 25% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 25%, var(--cc-old));} | |
| 26% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 26%, var(--cc-old));} | |
| 27% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 27%, var(--cc-old));} | |
| 28% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 28%, var(--cc-old));} | |
| 29% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 29%, var(--cc-old));} | |
| 30% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 30%, var(--cc-old));} | |
| 31% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 31%, var(--cc-old));} | |
| 32% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 32%, var(--cc-old));} | |
| 33% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 33%, var(--cc-old));} | |
| 34% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 34%, var(--cc-old));} | |
| 35% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 35%, var(--cc-old));} | |
| 36% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 36%, var(--cc-old));} | |
| 37% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 37%, var(--cc-old));} | |
| 38% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 38%, var(--cc-old));} | |
| 39% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 39%, var(--cc-old));} | |
| 40% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 40%, var(--cc-old));} | |
| 41% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 41%, var(--cc-old));} | |
| 42% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 42%, var(--cc-old));} | |
| 43% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 43%, var(--cc-old));} | |
| 44% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 44%, var(--cc-old));} | |
| 45% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 45%, var(--cc-old));} | |
| 46% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 46%, var(--cc-old));} | |
| 47% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 47%, var(--cc-old));} | |
| 48% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 48%, var(--cc-old));} | |
| 49% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 49%, var(--cc-old));} | |
| 50% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 50%, var(--cc-old));} | |
| 51% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 51%, var(--cc-old));} | |
| 52% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 52%, var(--cc-old));} | |
| 53% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 53%, var(--cc-old));} | |
| 54% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 54%, var(--cc-old));} | |
| 55% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 55%, var(--cc-old));} | |
| 56% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 56%, var(--cc-old));} | |
| 57% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 57%, var(--cc-old));} | |
| 58% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 58%, var(--cc-old));} | |
| 59% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 59%, var(--cc-old));} | |
| 60% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 60%, var(--cc-old));} | |
| 61% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 61%, var(--cc-old));} | |
| 62% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 62%, var(--cc-old));} | |
| 63% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 63%, var(--cc-old));} | |
| 64% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 64%, var(--cc-old));} | |
| 65% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 65%, var(--cc-old));} | |
| 66% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 66%, var(--cc-old));} | |
| 67% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 67%, var(--cc-old));} | |
| 68% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 68%, var(--cc-old));} | |
| 69% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 69%, var(--cc-old));} | |
| 70% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 70%, var(--cc-old));} | |
| 71% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 71%, var(--cc-old));} | |
| 72% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 72%, var(--cc-old));} | |
| 73% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 73%, var(--cc-old));} | |
| 74% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 74%, var(--cc-old));} | |
| 75% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 75%, var(--cc-old));} | |
| 76% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 76%, var(--cc-old));} | |
| 77% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 77%, var(--cc-old));} | |
| 78% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 78%, var(--cc-old));} | |
| 79% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 79%, var(--cc-old));} | |
| 80% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 80%, var(--cc-old));} | |
| 81% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 81%, var(--cc-old));} | |
| 82% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 82%, var(--cc-old));} | |
| 83% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 83%, var(--cc-old));} | |
| 84% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 84%, var(--cc-old));} | |
| 85% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 85%, var(--cc-old));} | |
| 86% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 86%, var(--cc-old));} | |
| 87% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 87%, var(--cc-old));} | |
| 88% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 88%, var(--cc-old));} | |
| 89% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 89%, var(--cc-old));} | |
| 90% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 90%, var(--cc-old));} | |
| 91% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 91%, var(--cc-old));} | |
| 92% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 92%, var(--cc-old));} | |
| 93% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 93%, var(--cc-old));} | |
| 94% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 94%, var(--cc-old));} | |
| 95% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 95%, var(--cc-old));} | |
| 96% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 96%, var(--cc-old));} | |
| 97% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 97%, var(--cc-old));} | |
| 98% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 98%, var(--cc-old));} | |
| 99% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 99%, var(--cc-old));} | |
| 100% {background-image: linear-gradient(var(--cc-deg),var(--cc-new),100%, var(--cc-new));} | |
| } | |
| @keyframes color-creep-out { | |
| 0% {background-image: linear-gradient(var(--cc-deg),var(--cc-new),100%, var(--cc-new));} | |
| 1% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 99%, var(--cc-old));} | |
| 2% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 98%, var(--cc-old));} | |
| 3% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 97%, var(--cc-old));} | |
| 4% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 96%, var(--cc-old));} | |
| 5% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 95%, var(--cc-old));} | |
| 6% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 94%, var(--cc-old));} | |
| 7% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 93%, var(--cc-old));} | |
| 8% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 92%, var(--cc-old));} | |
| 9% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 91%, var(--cc-old));} | |
| 10% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 90%, var(--cc-old));} | |
| 11% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 89%, var(--cc-old));} | |
| 12% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 88%, var(--cc-old));} | |
| 13% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 87%, var(--cc-old));} | |
| 14% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 86%, var(--cc-old));} | |
| 15% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 85%, var(--cc-old));} | |
| 16% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 84%, var(--cc-old));} | |
| 17% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 83%, var(--cc-old));} | |
| 18% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 82%, var(--cc-old));} | |
| 19% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 81%, var(--cc-old));} | |
| 10% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 80%, var(--cc-old));} | |
| 21% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 79%, var(--cc-old));} | |
| 22% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 78%, var(--cc-old));} | |
| 23% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 77%, var(--cc-old));} | |
| 24% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 76%, var(--cc-old));} | |
| 25% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 75%, var(--cc-old));} | |
| 26% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 74%, var(--cc-old));} | |
| 27% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 73%, var(--cc-old));} | |
| 28% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 72%, var(--cc-old));} | |
| 29% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 71%, var(--cc-old));} | |
| 30% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 70%, var(--cc-old));} | |
| 31% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 69%, var(--cc-old));} | |
| 32% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 68%, var(--cc-old));} | |
| 33% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 67%, var(--cc-old));} | |
| 34% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 66%, var(--cc-old));} | |
| 35% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 65%, var(--cc-old));} | |
| 36% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 64%, var(--cc-old));} | |
| 37% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 63%, var(--cc-old));} | |
| 38% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 62%, var(--cc-old));} | |
| 39% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 61%, var(--cc-old));} | |
| 40% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 60%, var(--cc-old));} | |
| 41% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 59%, var(--cc-old));} | |
| 42% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 58%, var(--cc-old));} | |
| 43% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 57%, var(--cc-old));} | |
| 44% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 56%, var(--cc-old));} | |
| 45% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 55%, var(--cc-old));} | |
| 46% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 54%, var(--cc-old));} | |
| 47% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 53%, var(--cc-old));} | |
| 48% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 52%, var(--cc-old));} | |
| 49% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 51%, var(--cc-old));} | |
| 50% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 50%, var(--cc-old));} | |
| 51% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 49%, var(--cc-old));} | |
| 52% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 48%, var(--cc-old));} | |
| 53% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 47%, var(--cc-old));} | |
| 54% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 46%, var(--cc-old));} | |
| 55% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 45%, var(--cc-old));} | |
| 56% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 44%, var(--cc-old));} | |
| 57% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 43%, var(--cc-old));} | |
| 58% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 42%, var(--cc-old));} | |
| 59% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 41%, var(--cc-old));} | |
| 60% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 40%, var(--cc-old));} | |
| 61% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 39%, var(--cc-old));} | |
| 62% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 38%, var(--cc-old));} | |
| 63% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 37%, var(--cc-old));} | |
| 64% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 36%, var(--cc-old));} | |
| 65% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 35%, var(--cc-old));} | |
| 66% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 34%, var(--cc-old));} | |
| 67% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 33%, var(--cc-old));} | |
| 68% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 32%, var(--cc-old));} | |
| 69% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 31%, var(--cc-old));} | |
| 70% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 30%, var(--cc-old));} | |
| 71% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 29%, var(--cc-old));} | |
| 72% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 28%, var(--cc-old));} | |
| 73% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 27%, var(--cc-old));} | |
| 74% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 26%, var(--cc-old));} | |
| 75% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 25%, var(--cc-old));} | |
| 76% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 24%, var(--cc-old));} | |
| 77% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 23%, var(--cc-old));} | |
| 78% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 22%, var(--cc-old));} | |
| 79% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 21%, var(--cc-old));} | |
| 80% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 19%, var(--cc-old));} | |
| 81% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 18%, var(--cc-old));} | |
| 82% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 17%, var(--cc-old));} | |
| 83% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 16%, var(--cc-old));} | |
| 84% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 15%, var(--cc-old));} | |
| 85% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 14%, var(--cc-old));} | |
| 86% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 13%, var(--cc-old));} | |
| 87% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 12%, var(--cc-old));} | |
| 88% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 11%, var(--cc-old));} | |
| 89% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 10%, var(--cc-old));} | |
| 90% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 10%, var(--cc-old));} | |
| 91% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 9%, var(--cc-old));} | |
| 92% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 8%, var(--cc-old));} | |
| 93% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 7%, var(--cc-old));} | |
| 94% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 6%, var(--cc-old));} | |
| 95% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 5%, var(--cc-old));} | |
| 96% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 4%, var(--cc-old));} | |
| 97% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 3%, var(--cc-old));} | |
| 98% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 2%, var(--cc-old));} | |
| 99% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 1%, var(--cc-old));} | |
| 100% {background-image: linear-gradient(var(--cc-deg),var(--cc-new), 0%, var(--cc-old));} | |
| } | |
| :root { | |
| --cc-old: goldenrod; /* The static color */ | |
| --cc-new: darkgreen; /* The hover color */ | |
| --cc-deg: -15deg; /* The direction of the swipe */ | |
| --cc-sec: 2s; /* The transition time of the creep */ | |
| } | |
| #color-creep-target { | |
| background-color: var(--cc-old); | |
| animation: color-creep-out var(--cc-sec) linear; | |
| } | |
| #color-creep-target:hover { | |
| background-color: darkgreen; | |
| animation: color-creep-in var(--cc-sec) linear; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment