/    Sign up×
Community /Pin to ProfileBookmark

Why does Animation not hide elements (text etc) inside the div?

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?

https://jsfiddle.net/ewuhaLzc/

to post a comment
CSS

6 Comments(s)

Copy linkTweet thisAlerts:
@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>
``
Copy linkTweet thisAlerts:
@sibertauthorFeb 23.2021 — > @Sempervivum#1628440 You are animating the width. In order to hide the text you have to add overflow; hidden

Thank you! I had to add nowrap in order to make it behave like the transition though:

https://jsfiddle.net/Lqa9k425/
Copy linkTweet thisAlerts:
@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`
.
Copy linkTweet thisAlerts:
@sibertauthorFeb 23.2021 — > @Sempervivum#1628444 if you intend to have the same behavious as the upper container, animate translateX.

How do I use translateX together with animate?
Copy linkTweet thisAlerts:
@SempervivumFeb 23.2021 — You can specify the transform in the keyframes:
``<i>
</i>@keyframes toggle {
from {
transform: translateX(0px);
}

to {
transform: translateX(-180px);
}
}<i>
</i>
``

However there is one disadvantage: The animation only works when the container disappears.
Copy linkTweet thisAlerts:
@sibertauthorFeb 23.2021 — > @Sempervivum#1628446 You can specify the transform in the keyframes:

Thank you. You have answered my questions completely :-)

I will evaluate the options.
×

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...