How to animate on hiding a div element in html

Asked Sep 09 '17 at 12:07

Active Sep 09 '17 at 12:07

Viewed 24 times

I'm a beginner to html/css and I'm trying to animate the div content on hiding. Here's what I tried,

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<button onClick="clicked()">hide</button>
<div class="w3-container w3-center w3-animate-left" id="animeContent">
  <h1>Animation is Fun!</h1>
  <p>The w3-animate-left class slides in an element from left.</p>
</div>

<script>
function clicked()
{
 document.getElementById("animeContent").classList.add('w3-hide');
}
</script>

</body>
</html>

How can use animation for hiding contents?

asked Sep 09 '17 at 12:07

HariDev

1

You're trying to animate the `display` property...and that's not possible. – Paulie_D Sep 09 '17 at 12:21
@Paulie_D when it is possible to animate while showing, why not possible for hiding? – HariDev Sep 09 '17 at 13:22

How to animate on hiding a div element in html

0 Answers0