hovers.css

[Afif13]

Thinking about the different hover animation I think it would suitable to have a "hovers.css" bundle with some particular rules (instead of adding this to "Utilities.css").
I would imagine 3 cases.

1) Separate the non-hover and hover state:

In this case we can have the following:

* {
  --underline-effect-1:....
  --underline-effect-1-hover:....
  --underline-effect-2:....
  --underline-effect-2-hover:....
}

.elem {
  background:var(--underline-effect-1);
}
.elem:hover {
  background:var(--underline-effect-1-hover);
}

Each state will have its own variable. It's easy to define but not a good for sizing because we will for sure have a lot of duplication between both states. They will be almost the same with one or two value of difference.

I am not really OK for this one

2) one variable for the hover state

In this case you will have the following:

* {
  --is-hover:0;
  --underline-effect-1:....
  --underline-effect-2:....
}

.elem {
  background:var(--underline-effect-1);
}
.elem:hover {
  --is-hover:1;
}

Here we express the effect using only one variable (less code) BUT we need to include the --is-hover as a switch variable using some calc() and other stuff (it may be tricky to code in some cases). Later we simply update the --is-hover. The latter can also be shared between all the variables.

I like more this idea and this is what I started to do: https://codepen.io/t_afif/pen/qBPbbWb

3) one variable and implicit hover state.

This case is an optimization of the (2) by having:

* {
  --is-hover:0;
  --underline-effect-1:....
  --underline-effect-2:....
}
*:hover {
  --is-hover:1;
}

.elem {
  background:var(--underline-effect-1);
}

The hover state is defined inside the library so we don't have to write too much CSS code (only one line is needed). This can avoid having to deal with the --is-hover variable that remain internal. The drawback here is that we force the hover effect so it may have some sides effect (I don't see any actually)

---

Let me know which one you consider as the best or maybe you have another alternative. I have different ideas of animation using gradient/mask and I can express them using one of the above.

[airen]

Using it this way is a good suggestion, as described in @lea Verou‘s 《The -​-var: ; hack to toggle multiple values with one custom property》. I prefer the idea mentioned by @lea Verou that using key initial in CSS custom properties allows the custom property to have an on/off effect (a toggle between off and on). This use could be used in hover.

eg.

<div class="element">
  <span>Hover Me (^_^)</span>
</div>

:root {
  --ON: initial;
  --OFF: ;
}

.element {
  --rotate-switch: var(--OFF);
  --rotate-deg: 45deg;
  min-width: 50vmin;
  aspect-ratio: 1 / 1;
  background-color: #f36;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: #fff;
  padding: 2rem;
  gap: 2rem;
  transition: all 0.2s linear;
  cursor: pointer;

  transform: rotate(var(--rotate-switch, var(--rotate-deg)));
}

.element span {
  transition: all 0.2s linear;
  transform: rotate(var(--rotate-switch, -45deg));
}

.element:hover {
  --rotate-switch: var(--ON);
}

CodePen: https://codepen.io/airen/pen/oNYyVag

@lea Verou's other a blog post 《Custom properties with defaults: 3+1 strategies》 that mentions suggestions that are also worth considering

[Afif13]

Such technique is only useful to enable a specific value (or the fallback value) and it's a bit verbose for the user as it requires you to know how to correctly write it. You cannot use it to create a transition between two different states like the example I did. As you can see in your example, you are creating a transition between the default value and 45deg. What if we need a transition between Xdeg and Ydeg?

It should be noted that the variable --is-hover I am defining that I switch between 0/1 is to illustrate the internal implementation. If we decide to go with it we can hide the 0/1 under other variables to have a more user friendly syntax like --is-hover:(--enable); where we simply set --enable:1;

[airen]

This may increase the number of props, requiring a default state (--default) and also a hover state (--hover). If there are a lot of hover effects, it is not an easy task to maintain them.

[Afif13]

That's why I am giving 3 different proposals where in one we will have 2 props (easy to code but a lot of code) and in another we only need 1 props with a switch variable shared between all the hover effect (the --is-hover). In the latter, we will have only one variable per hover effect but we need to code that variable with the --is-hover (tricky to code but less of code).

Either we have N+1 props for N hover effects (the method (2) and (3)) or we have 2*N props for N hover effect (the method (1)).

[argyleink]

super fun idea!

I forked idea 2 and played around, ended up with this before I decided to go to bed:

.foo {
  background: var(--underline-animation-1)
}

.foo:hover {
  background-size: var(--underline-animation-in)
}

debatable if it's any better, probably not

but regarding strategy 1, those vars can ship under :root instead of *, which this lib seeks to do. it also becomes less of an issue with the jit-props plugin. i went back and looked at how i did the props in transition.style and it looks like this:

@keyframes circle-swoop {
  from {
    clip-path: var(--circle-top-right-out);
  }
  to {
    clip-path: var(--circle-bottom-right-in);
  }
}

Calling them out and in, while limited is as easy as it gets to use. kinda appealing! we could also pacify sizing woes with multiple bundles, offer smaller more focused hover animations.

i havent made any decision yet 🙁 , still soaking it all in. but it easy for me to slip into making mixins with properties, adding options and params, but i feel its a different beast, like a whole lib should be like open props but it's like open-mixins. lean heavy into props as params.

[Afif13]

I agree with the fact of keeping the variables inside :root and the the in/out trick.

I have reworked my initial idea to come with the following:

:root {
  --underline-color:currentColor;
  --size-thin:0.1em;
  --size-thick:0.2em;
  
  --underline-left-thin-in: linear-gradient(var(--underline-color) 0 0) 0 100%/0 var(--size-thin) no-repeat;
  --underline-left-thin-out: linear-gradient(var(--underline-color) 0 0) 0 100%/100% var(--size-thin) no-repeat;
  --underline-left-thick-in: linear-gradient(var(--underline-color) 0 0) 0 100%/0 var(--size-thick) no-repeat;
  --underline-left-thick-out: linear-gradient(var(--underline-color) 0 0) 0 100%/100% var(--size-thick) no-repeat;
  
  --underline-right-thin-in: linear-gradient(var(--underline-color) 0 0) 100% 100%/0 var(--size-thin) no-repeat;
  --underline-right-thin-out: linear-gradient(var(--underline-color) 0 0) 100% 100%/100% var(--size-thin) no-repeat;
  --underline-right-thick-in: linear-gradient(var(--underline-color) 0 0) 100% 100%/0 var(--size-thick) no-repeat;
  --underline-right-thick-out: linear-gradient(var(--underline-color) 0 0) 100% 100%/100% var(--size-thick) no-repeat;
  
  --underline-center-thin-in: linear-gradient(var(--underline-color) 0 0) 50% 100%/0 var(--size-thin) no-repeat;
  --underline-center-thin-out: linear-gradient(var(--underline-color) 0 0) 50% 100%/100% var(--size-thin) no-repeat;
  --underline-center-thick-in: linear-gradient(var(--underline-color) 0 0) 50% 100%/0 var(--size-thick) no-repeat;
  --underline-center-thick-out: linear-gradient(var(--underline-color) 0 0) 50% 100%/100% var(--size-thick) no-repeat;
  
  --underline-double-1-thin-in: 
      linear-gradient(var(--underline-color) 0 0) 0    100%/0 var(--size-thin) no-repeat,
      linear-gradient(var(--underline-color) 0 0) 100% 100%/0 var(--size-thin) no-repeat;
  --underline-double-1-thin-out: 
      linear-gradient(var(--underline-color) 0 0) 0    100%/51% var(--size-thin) no-repeat,
      linear-gradient(var(--underline-color) 0 0) 100% 100%/51% var(--size-thin) no-repeat;
  --underline-double-1-thick-in: 
      linear-gradient(var(--underline-color) 0 0) 0    100%/0 var(--size-thick) no-repeat,
      linear-gradient(var(--underline-color) 0 0) 100% 100%/0 var(--size-thick) no-repeat;
  --underline-double-1-thick-out: 
      linear-gradient(var(--underline-color) 0 0) 0    100%/51% var(--size-thick) no-repeat,
      linear-gradient(var(--underline-color) 0 0) 100% 100%/51% var(--size-thick) no-repeat;
  
  --underline-double-2-thin-in:
      linear-gradient(var(--underline-color) 0 0) 0 100% /0 var(--size-thin) no-repeat,
      linear-gradient(90deg, #0000 50%, var(--underline-color) 0) bottom /0 var(--size-thin) no-repeat;
  --underline-double-2-thin-out:
      linear-gradient(var(--underline-color) 0 0) 0 100% /51% var(--size-thin) no-repeat,
      linear-gradient(90deg, #0000 50%, var(--underline-color) 0) bottom /100% var(--size-thin) no-repeat;
  --underline-double-2-thick-in:
      linear-gradient(var(--underline-color) 0 0) 0 100% /0 var(--size-thick) no-repeat,
      linear-gradient(90deg, #0000 50%, var(--underline-color) 0) bottom /0 var(--size-thick) no-repeat;
  --underline-double-2-thick-out:
      linear-gradient(var(--underline-color) 0 0) 0 100% /51% var(--size-thick) no-repeat,
      linear-gradient(90deg, #0000 50%, var(--underline-color) 0) bottom /100% var(--size-thick) no-repeat;
  
  --underline-double-3-thin-in:
      linear-gradient(var(--underline-color) 0 0) 100% 100% /0 var(--size-thin) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) bottom /0 var(--size-thin) no-repeat;
  --underline-double-3-thin-out:
      linear-gradient(var(--underline-color) 0 0) 100% 100% /51% var(--size-thin) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) bottom /100% var(--size-thin) no-repeat;
  --underline-double-3-thick-in:
      linear-gradient(var(--underline-color) 0 0) 100% 100% /0 var(--size-thick) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) bottom /0 var(--size-thick) no-repeat;
  --underline-double-3-thick-out:
      linear-gradient(var(--underline-color) 0 0) 100% 100% /51% var(--size-thick) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) bottom /100% var(--size-thick) no-repeat;
  
  --underline-double-4-thin-in:
      linear-gradient( 90deg, #0000 50%, var(--underline-color) 0) 75% 100% /0 var(--size-thin) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) 25% 100% /0 var(--size-thin) no-repeat;
  --underline-double-4-thin-out:
      linear-gradient( 90deg, #0000 50%, var(--underline-color) 0) 75% 100% /100% var(--size-thin) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) 25% 100% /100% var(--size-thin) no-repeat;
  --underline-double-4-thick-in:
      linear-gradient( 90deg, #0000 50%, var(--underline-color) 0) 75% 100% /0 var(--size-thick) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) 25% 100% /0 var(--size-thick) no-repeat;
  --underline-double-4-thick-out:
      linear-gradient( 90deg, #0000 50%, var(--underline-color) 0) 75% 100% /100% var(--size-thick) no-repeat,
      linear-gradient(-90deg, #0000 50%, var(--underline-color) 0) 25% 100% /100% var(--size-thick) no-repeat;
}

7 different hover effect, each one with two variations (a thin and a thick) and we have 3 global and shared variables that we can easily adjust (the color and the size of each variation). A bit verbose, yes, but I think the usage is pretty simple and intuitive.

Demo: https://codepen.io/t_afif/pen/VwMKXEg

I still have more animations but I think we should start with only a few of them until we get the perfect organization and syntax before adding more.