CODEWITHSUNDEEP
htmlcssfadehtml-tag-details
Script Raccoon
Script Raccoon

Reputation: 395

Fade animation for HTML details element with CSS

Using the HTML details element and its open-attribute we can build a fade in animation:

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
}

details {
  margin: 20px;
}

summary {  
  list-style-type: none;
  text-decoration: underline;
  cursor: pointer;
}

#content {
  margin-top: 10px;
  transition: transform 100ms ease-out;
  transform: translateX(-150px);
}

details[open] #content {
  transform: translateX(0px);
}
<details>
  <summary>
    Click me
  </summary>
  <div id="content">
    This is some content.
  </div>  
</details>

At least, this works fine in Firefox. In Chrome, the fade in animation only works randomly, like every 5th time or so. Most often the content just pops up without any animation.

First question: Why is Chrome so buggy here?

To build the fade out animation, a basic idea is to add to the details:not([open]) selector. However, this does not work. It gives no animation at all.

Second question: How to add a fade out animation with HTML and CSS alone?

PS: I am aware how to build something like that with div's and JavaScript (or jQuery). The aim here is to build something with HTML details element and CSS alone.

Upvotes: 2

Views: 509

Answers (0)

Related Questions