Re: [csswg-drafts] [css-display] Why is display listed as not animatable instead of animation type: discrete? (#6429)

> Though it's not a strong preference, I personally prefer the alternative approach in [#6429 (comment)](https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1462399688) .

I'm not opposed to having such a property but I think it would be a bit challenging that until the new property had universal support you'd still have to specify `display: none` when the new property wasn't supported. e.g.

```css
.target.hidden {
  display: none;
}

@supports(visibility: none) {
  .target.hidden {
    transition: visibility;
    visibility: none;
    display: block;
  }
}
```

Technically you could use `@supports not (visibility: none)` but this was historically considered bad practice. However, since all of this can be done orthogonally I still feel like it makes sense to justallow animating display now and we could pursue this other property later for better ergonomics.

> The example of CSS animation in [#6429 (comment)](https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1318933547) looks awkward to me. Given that to animate the display property web authors need to specify at least a display property value in a keyframe, even if it's the same right?

The simple thing would be to transition display, but yes, to do it with an animation you have to repeat the same value. This is no different than how you have to repeat the old value of any other property if you want to use an animation to go from the old value to some new value, e.g.

```css
@keyframes fade-out {
  /* you have to specify the old value because it is no longer applied by the cascade. */
  from {opacity: 1;}
}

.target.hide {
  opacity: 0;
  animation: fade-out 200ms;
}
```

> For example, the example can be written;
> 
> ```
> @keyframes slideaway {
>   from { display: flex; }
>   to { transform: translateY(40px); opacity: 0;}
> }
> 
> #target {
>   display: flex;
> }
> 
> #target.hide {
>   animation: slideaway 200ms;
>   display: none;
> }
> ```
> 
> Web authors will probably need to care that they need to specify the same display value. Am I missing something?

The simpler approach would be to add `transition: display 200ms` to the `#target.hide` selector. But yes, having to specify the old value if you want to animate from a previously applied value is standard for any property.

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1487344436 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 March 2023 17:39:28 UTC