So, you’d like to animate the display property
It’s a bit of a brain-twister to reason about because setting
display: none on an element cancels animations. And adding it restarts animations. Per the spec:
That circular behavior is what makes the concept seemingly dead on arrival. But if
@keyframes supported any
display value other than
none, then there’s no way for
none to cancel or restart things. That gives non-
none values priority, allowing
none to do its thing only after the animation or transition has completed.
We’re not exactly interpolating between, say,
none, but allowing
block to stay intact until the time things stop moving and it’s safe to apply
none. These are keywords, so there are no explicit values between the two. As such, this remains a discrete animation. We’re toggling between two values once that animation is complete.
This is a helpful example because it shows how the first frame sets the element to
display: block, which is given priority over the underlying
display: none as a non-
none value. That allows the animation to run and finish without
none cancelling or resetting it in the process since it only resolves after the animation.
This is the example Miriam referenced on Mastodon:
We’re dealing with a transition this time. The underlying
display value is set to
none before anything happens, so it’s completely out of the document flow. Now, if we were to transition this on hover, maybe like this:
…then the element should theoretically fade in at
200ms. Again, we’re toggling between
display values, but
block is given priority so the transition isn’t cancelled up front and is actually applied after
opacity finishes its transition.
At least that’s how my mind is reading into it. I’m glad there are super smart people thinking these things through because I imagine there’s a ton to sort out. Like, what happens if multiple animations are assigned to an element — will
none reset or cancel any of those? I’m sure everything from infinite animations, reversed directions, and all sorts of other things will be addressed in time.
But what a super cool first step!
If you need help creating a digital marketing strategy for your business, don’t hesitate to contact one of Digidude’s consultants.