Gradient Animation Combos

[argyleink]

.box {
  background: var(--gradient-shine), var(--gradient-4);
  
  &:hover {
    animation: var(--gradient-shine-animation);
  }
}

which is backed by the following props:

:root {
  --gradient-shine: linear-gradient(120deg, 
    #fff0 45%, 0%,
    #fff4 50%, 0%,
    #fff0 calc(50% + 10px), 0%,
    #fff7 calc(50% + 30px), 0%,
    #fff0 calc(50% + 40px), 0%,
    #fff4 calc(50% + 50px), 0%,
    #fff0 0%
  ) 100% / 300% 100%;
  --gradient-shine-animation: shine 2s ease infinite;
}

@keyframes shine {
  /*  1s effect, 1s hold  */
  50%, 100% {
    background-position-x: 0%;    
  }
}

see codepen https://codepen.io/argyleink/pen/oNGzpgO?editors=1100

is this too confusing to use? does it fit within Open Props?

[Afif13]

I think it's good if well documented. The only issue I can see here is that the animation adjust the background-position of both layers. In this case nothing will happen for the bottom one since it has the default 0 0 position. Maybe in other situation it may create unwanted result if the bottom layer has a different position than the default one. We should pay attention to this.

[argyleink]

def agree, i was initially surprised --gradient-4 didnt move. i tried making the position a prop, then change the prop in the keyframes, but the scopes don't align.

def worth seeing if there's a way with no side effects 👍🏻