Skip to content

Instantly share code, notes, and snippets.

@bananu7
Created October 7, 2022 15:40
Show Gist options
  • Save bananu7/24ad00de26e05ac0ea8f7aef242ac074 to your computer and use it in GitHub Desktop.
Save bananu7/24ad00de26e05ac0ea8f7aef242ac074 to your computer and use it in GitHub Desktop.
@property --x {
syntax: '<percentage>';
inherits: false;
initial-value: 0%;
}
@keyframes colorChange {
0% {
--x:0%;
}
50% {
--x:50%;
}
100% {
--x:100%;
}
}
@keyframes pulse {
from {
background: radial-gradient(circle, rgba(51,153,51,1) 0%, rgba(0,0,0,1) 100%);
}
to {
background: radial-gradient(circle, rgba(51,153,51,1) 100%, rgba(0,0,0,1) 100%);
}
}
.CommandPalette > button.active {
animation-duration: 0.5s;
animation-name: colorChange;
animation-timing-function: linear;
animation-iteration-count: infinite;
background: radial-gradient(circle, rgba(51,153,51,1) var(--x), rgba(0,0,0,1) 200%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment