Problem with animation on detail element expansion (css only, no js)

Question

I have this CSS / HTML code :

    body {
        font-family: "Segoe UI", "Helvetica Neue", "Helvetica", "Open Sans", "FreeSans", "Arial", "sans-serif";
        margin: 2em 1em 5em 1em;
    }
    ul {
        margin-top: 0px;
    }
    details {
        margin-bottom: 1.3em;
    }
    details summary {
        font-size: 1.1em;
        font-weight: bold;
        display: inline;
        cursor: pointer;
    }
    details summary ~ * {
        animation: expanddetails 0.3s ease-out;
        transform-origin: left top;
    }
    @keyframes expanddetails {
        0% {
            opacity: 0;
            line-height: 0%;
            transform: scaleY(0%);
        }
        25% {
            opacity: 0.5;
            line-height: 25%;
            transform: scaleY(25%);
        }
        100% {
            opacity: 1;
            line-height: 100%;
            transform: scaleY(100%);
        }
    }
    summary::marker, summary::-webkit-details-marker {
        content: none;
    }
    summary::after {
        content: "+";
        display: inline-block;
        transition: 0.3s;
        transform: rotate(0);
    }
    details[open] summary::after {
        content: "+";
        transform: rotate(360deg);
    }
    h2 {
        font-size: 1.1em;
        margin-bottom: 0;
    }
    .nobullet {
        list-style: none;
    }

            <div>
                <p>Some text before inside div</p>
            </div>
            <details>
                <summary>Summary 1 &nbsp;&nbsp;</summary>
                <ul>
                    <li>List 1 - Item 1</li>
                    <li>List 1 - Item 2</li>
                    <li class="nobullet">See <a href="#myid"><strong>There</strong></a>, ...</li>
                </ul>
            </details>
            <details>
                <summary>Summary 2 &nbsp;&nbsp;</summary>
                <ul>
                    <li>List 2 - Item 1</li>
                    <li>List 2 - Item 2</li>
                    <li>List 2 - Item 3</li>
                    <li class="nobullet">...</li>
                </ul>
            </details>
            <details>
                <summary>Summary 3 &nbsp;&nbsp;</summary>
                <ul>
                    <li>List 3 - Item 1</li>
                    <li>List 3 - Item </li>
                </ul>
            </details>
            <details>
                <summary>Summary 4 &nbsp;&nbsp;</summary>
                <ul id="myid">
                    <li>List 4 - Item 1</li>
                    <li>List 4 - Item 2</li>
                    <li class="nobullet">...</li>
                </ul>
            </details>
            <h2>Some Element with no list</h2>
            <div>
                <p>Other text</p>
            </div>

EDIT 2

The animation for the expansion of the detail elements works once only for each element, except on Firefox (always working). Furthermore, it is triggered on expand only, not when collapsing, while the "+" sign is rotating on expand and collpase and for each expand/collpase not only once. Why ? and how can this works each time, and for collapsing too.

One more question : is there a way without javscript to expand summary 4 on anchor click (this don't work for Firefox).

Thanks