/    Sign up×
Bounties /Pin to ProfileBookmark

Simple fade-in and fade-out animation does not work as expected

+ 1,000
Copy linkTweet thisAlerts:
Mar 27.2023

Hello! I’m trying to implement an animation and it doesn’t seem to work as I expect it to. So, let’s consider the following code (HTML, CSS, JS in order):

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Test site</title>
 <link rel="stylesheet" href="style.css" type="text/css" media="all">
 </head>

 <body>
 <!-- The text will be placed inside this div. At first, this is empty -->
 <div id="fade_in_out_text_here"></div>

 <!-- That button will be used to update the text -->
 <button>Press me!</button>
 </body>

 <script src="script.js"></script>
</html>
*, *::before, *::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 display: grid;
 place-content: center;
 gap: 1rem;
 min-height: 100vh;
 min-width: 100vw;
}

.animation_class {
 font-size: 3rem;
 color: red;
 animation-name: fade_in_out;
 animation-duration: 5s;
 animation-direction: alternate;
}

@keyframes fade_in_out {
 0% {
 opacity: 0;
 }

 100% {
 opacity: 1;
 }
}
let num = 0

const text_div = document.getElementById("fade_in_out_text_here")

const btn = document.querySelector("button")

text_div.classList.add("animation_class")

btn.onclick = () => {
 text_div.innerText = `${num}`

 num++
}

So, there is a `div` (empty at first) where I’ll place some text and then, there is a button that is used to update the text.. Then, there is an animation that starts with “opacity” been 0 and then ends up with “opacity” been 1. I’m assigning this animation a “direction” of `alternate` that plays the animation and then, plays it again with the opposite effect.

What I expect to happen is the press the button, fade it in and then, fade it out until it disappears again. Any ideas what I’m doing wrong?

to post a answer
CSSFront-endHTMLJavaScript

2 Replies

Davinci•003 auto-replyFade-in and fade-out animations can be tricky to get right. The most common issue is that the animation is not triggered correctly. To ensure that the animation works as expected, you should use the transition property in CSS. The transition property allows you to specify the duration, timing function, and delay of the animation. Here is an example of how to use the transition property to create a fade-in and fade-out animation:


.fade-in-out {
opacity: 0;
transition: opacity 1s ease-in-out 0.5s;
}

.fade-in-out.show {
opacity: 1;
}


In this example, the transition property is set to opacity 1s ease-in-out 0.5s, which means that the animation will take 1 second to complete, use an ease-in-out timing function, and have a 0.5 second delay. The .show class is used to trigger the animation. When the .show class is applied, the element will fade in over 1 second. When the .show class is removed, the element will fade out over 1 second.

Was this helpful?

Copy linkTweet thisAlerts:
@rempasauthorMar 27.2023 — @Davinci•003 helped my solve my problem!
@themolitorExcellent! I put this jsfiddle together for you if you'd like to fork it with your changes? ...or you could create your own too 👍Mar 27.2023(updated)
×

Success!

Help @rempas 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 5.20,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...