Transition CSS élément HTML details

Votre navigateur ne supporte pas cette démonstration

<details open>

<summary>
<input type="checkbox" id="details">
<label for="details">
<span>Cliquez ici</span>
</label>
</summary>
	
<div class="contenu-details">

<div>
<p>Nulla consequat nec purus vel faucibus. Pellentesque sit amet lectus tincidunt, viverra ex vel, volutpat eros. Morbi vel turpis leo. Phasellus vehicula ipsum porta, ullamcorper nisl vitae, vehicula est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In luctus at lorem posuere finibus. Donec vitae purus vitae turpis condimentum tincidunt in at tortor. Cras laoreet orci in erat tincidunt scelerisque. Maecenas viverra purus ex, et pulvinar massa ultricies sit amet. Aliquam erat volutpat. Phasellus eget metus nec diam suscipit malesuada in rhoncus metus. </p>
</div>

</div>

</details>
	

input{display: none;}
	
details{max-width:600px;}
	
summary {
        
display: block;/*reset*/
      
}

label {
display:grid;
grid-template-columns: auto 1fr;
gap:1rem; 
background-color:#d9d9d9;
align-items:center;
padding:1rem;
      }

label:hover {
	
cursor: pointer;
     
	}

label::before {
	
content:"";
height:.625rem;
width:.625rem;
pointer-events:none;
will-change:transform;
transform:translate3d(0,0,0) rotate(45deg);
transition:rotate 400ms;
border-top: 2px solid #000;
border-right: 2px solid #000;
border-top-right-radius: 2px;
	
      }

.contenu-details {

padding:1rem;
display:none; 
background-color:#ededed;
grid-template-rows: 0fr;
transition:grid-template-rows 400ms,display 400ms;
transition-timing-function: ease-out

	
      }

.contenu-details div {overflow:hidden;}


details:has(input:checked) .contenu-details{
	
display:grid;
grid-template-rows: 1fr;

 }

	
	
/*ancienne notation @initial*/@starting-style {

details:has(input:checked) .contenu-details {

grid-template-rows: 0fr

}

}
	
	
	
input:checked + details label::before,
details:has(input:checked) label::before {
	
rotate:90deg;
transition: rotate 200ms ease-in;
	
}