<p>I made two examples.</p>
<h2 id="heading-with-no-more-property">With No More Property</h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/oNqOrRr">https://codepen.io/bada3670/pen/oNqOrRr</a></div>
<h2 id="heading-with-transform-translatey50">With 'transform: translateY(50%)'</h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/bada3670/pen/WNzWqVO">https://codepen.io/bada3670/pen/WNzWqVO</a></div>
<h2 id="heading-conclusion">Conclusion</h2>
<p>'display: none': The property does not work.</p>
<p>'opacity: 0': Fade-in and fade-out effects happen.</p>


I made two examples.

## With No More Property

%[https://codepen.io/bada3670/pen/oNqOrRr]

## With 'transform: translateY(50%)'

%[https://codepen.io/bada3670/pen/WNzWqVO]

## Conclusion

'display: none': The property does not work.

'opacity: 0': Fade-in and fade-out effects happen.

examplist

examplist

'display: none', 'visibility: hidden', 'opacity: 0' with 'transition' Property

With No More Property

With 'transform: translateY(50%)'

Conclusion