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.

Answer 1

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>

Answer 2

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>