Why CSS open event of summary tag not perform?

Question

I am trying to make <detail> tag style more comfortable, and the opacity changage does not work, when I open the <detail> tag.
Here is my code:

details:not([open]) > :not(summary){
  opacity: 0;
  -webkit-transition-duration: 0.35s;
}
details[open] > :not(summary){
  opacity: 1;
  -webkit-transition-duration: 0.35s;
}

<details>
<summary>Details tag</summary>
<p>Now, it shows details</p>
</details>

I want it can change opacity gradually. I also want a CSS-only solution and the CSS could not use animate(@keyframes), because it is easier for me to maintain the website.
If someone can let the code work, it is the best solution.

Does this answer your question? [css transition opacity fade background](https://stackoverflow.com/questions/21145621/css-transition-opacity-fade-background) — Zeikman, Feb 21 '23 at 02:51
The `-webkit-` prefix for `transition` is obsolete and should not be used. Use `transition-duration` - also, you aren't specifying the property-name that `transition` should be transitioning... also, `[open]` controls `display: none;` which cannot be transitioned. — Dai, Feb 21 '23 at 02:56

score 1 · Answer 1 · answered Feb 21 '23 at 02:52

1

details > :not(summary) {
  animation: fadeIn .35s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<details>
  <summary>Details tag</summary>
  <p>Now, it shows details</p>
</details>

answered Feb 21 '23 at 02:52

Eric Fortis

16,372
6
41
62

This only animates once: the first time the `
` is expanded - on subsequent expansions it doesn't animate.
– Dai Feb 21 '23 at 02:56
That works, but I also want a CSS-only solution and the CSS could not use animate(@keyframes). Also, it seemed that it only perform once. – Han Han Feb 21 '23 at 03:08

Anil kumar · Accepted Answer · 2023-02-21T06:54:52.950

When details tag is collapsed, all elements except summary are hidden.
You cannot animate from hidden state.

When details expanded, open attribute added.
Target open attribute.

    details[open] {
        animation: fadeIn .35s ease-in-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    <details>
        <summary>Details tag</summary>
        <p>Now, it shows details</p>
    </details>

Why CSS open event of summary tag not perform?

2 Answers2