I am trying to understand the difference between **translate** and **animate**. My question is why text or any element not are “hidden” when using animation? Is it possible to get the same effect as translate?
@SempervivumFeb 23.2021 — #>My question is why text or any element not are "hidden" when using animation?
You are animating the width. In order to hide the text you have to add `overflow; hidden<br/> ;</C>: <CODE>`<i> </i>.main2 { height: 200px; width: 180px; font-weight: 400; background-color: yellow; animation-duration: 0.3s; /* transition-property: width; */ animation-fill-mode: forwards; overflow: hidden; }<i> </i>``
@SempervivumFeb 23.2021 — #You can prevent the text from wrapping by `white-space: nowrap;</C>.<br/> Or, if you intend to have the same behavious as the upper container, animate <C>translateX`.