So, you’d wish to animate the show property | CSS-Methods

The CSS Working Group gave {that a} thumbs-up a pair weeks in the past. The super-duper conceptual proposal being that we are able to animate or transition from, say, show: block to show: none.

It’s a little bit of a brain-twister to purpose about as a result of setting show: none on a component cancels animations. And including it restarts animations. Per the spec:

Setting the show property to none will terminate any operating animation utilized to the ingredient and its descendants. If a component has a show of none, updating show to a worth aside from none will begin all animations utilized to the ingredient by the animation-name property, in addition to all animations utilized to descendants with show aside from none.

That round conduct is what makes the idea seemingly useless on arrival. However if @keyframes supported any show worth aside from none, then there’s no means for none to cancel or restart issues. That provides non-none values precedence, permitting none to do its factor solely after the animation or transition has accomplished.

Miriam’s toot (that is what we’re actually calling these, proper?) explains how this would possibly work:

We’re not precisely interpolating between, say, block and none, however permitting block to remain intact till the time issues cease transferring and it’s secure to use none. These are key phrases, so there are not any specific values between the 2. As such, this stays a discrete animation. We’re toggling between two values as soon as that animation is full.

That is the Robert Flack’s instance pulled straight from the dialogue:

@keyframes slideaway {
  from { show: block; }
  to { rework: translateY(40px); opacity: 0;}
}

.conceal {
  animation: slideaway 200ms;
  show: none;
}

It is a useful instance as a result of it reveals how the primary body units the ingredient to show: block, which is given precedence over the underlying show: none as a non-none worth. That permits the animation to run and end with out none cancelling or resetting it within the course of because it solely resolves after the animation.

That is the instance Miriam referenced on Mastodon:

.conceal {
  transition: opacity 200ms, show 200ms;
  show: none;
  opacity: 0;
}

We’re coping with a transition this time. The underlying show worth is about to none earlier than something occurs, so it’s utterly out of the doc stream. Now, if we had been to transition this on hover, possibly like this:

.conceal:hover {
  show: block;
  opacity: 1;
}

…then the ingredient ought to theoretically fade in at 200ms. Once more, we’re toggling between show values, however block is given precedence so the transition isn’t cancelled up entrance and is definitely utilized after opacity finishes its transition.

Not less than that’s how my thoughts is studying into it. I’m glad there are tremendous good individuals considering these items by way of as a result of I think about there’s a ton to kind out. Like, what occurs if a number of animations are assigned to a component — will none reset or cancel any of these? I’m certain the whole lot from infinite animations, reversed instructions, and all kinds of different issues shall be addressed in time.

However what a brilliant cool first step!