[SOLVED] Why CSS open event of summary tag not perform?

Why CSS open event of summary tag not perform?

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.

Solution

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>