Html Question posted in
Some basic documentation can be found here.

Html – CSS visibility and block doesn't work when I am trying to animation

So I make something very basic.

I want to make a button have a slide down feature using CSS. However it doesn’t seem to work. In fact it seems like CSS maybe has removed it for everything except for the body.

h3 {
    display: none;
}

body:active h3 {
    display: block;
    opacity: 2;
}

<div class="subcontent"> <h3>words here</h3></div>

The thing is I don’t feel the need to add the code for the button because no matter what I do it doesn’t work. I can create a text using p and try to make it so that when you click on it or hover over it it would make the the div pop up. However it doesn’t. Literally nothing works. I can put anything to replace body nothing seems to work. The only thing that seems to work is body. Which I find weird. Why isn’t working? Literally it is so simple and I search online and people who are using visibility make it work and they don’t even need bunch coding. Just add animations and all that. All I want is to make this work so I can add whatever I want to edit it. However it isn’t working no matter what I replace it with. Why isn’t it only working on body only?

Tried everything doesn’t work. Only thing that works is using body. I tried doing it to just .subcontent but it didn’t work so I added h3 to the words to see if that would do anything but it still didn’t work.

Tags:

2

Answers


  1. 0

    Here you have it.

    <style>
.subcontent {
    opacity: 0; /*instead of display: none*/
    transition: all 0.2s; /*by decreasing this number, the animation gets faster*/
    top: -20px; /*for the sliding motion*/
    position: relative;
}

h3:active + .subcontent {
    transition: all 0.2s;/*by decreasing this number, the animation gets faster*/
    opacity: 1;/*instead of display: block !important*/
    top: 0px;
}
</style>

<h3>Heading</h3>
<div class="subcontent">words here, words here, words here, words here, words here, words here, words here, words here, words here, words here, words here, words here  </div>

    As @G-Cyrillus said, display cannot be animated.

    I used opacity:0 instead of display: none;.

    And I’ve added a top: -20 for a sliding motion.

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .subcontent h3 {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
        }

        body:active .subcontent h3 {
            max-height: 100px; /* Adjust this value to the height of your content */
        }
    </style>
</head>
<body>
    <div class="subcontent">
        <h3>words here</h3>
    </div>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search