Animation for DropDown CSS

Question

I'm making a dropdown menu which will drop down the content in animation when the button is hovered, below is my code:

<style>
    .dropbtn {
        background-color: linen;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.menu{
    background-color: aliceblue;
    text-align: center;
}
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: cornsilk;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: yellow;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    animation: growDown 300ms ease-in-out forwards
    }

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.profile{
    border-radius: 100%;
}
</style>
<center>
<table height="10%">
<tr class="menu">
<td width="10%">
<div class="dropdown">
  <button class="dropbtn">SOALAN</button>
  <div class="dropdown-content">
    <a href="papar_topik.php">Kuiz</a>
    <a href="prestasi_topik.php">Keputusan</a>
  </div>
 </div></td>

But it's failed to show it in animation. It is just drop down like as usual. Anyone know where should I place the "animation".

I can't see that you have defined the animation (name growdown) anywhere - it would need a keyframes setting. But you could also investigate using a transform with a transition. — A Haworth, Jul 30 '21 at 07:22

score 0 · Answer 1 · answered Jul 30 '21 at 07:40

You should consider the use of transform but... If you must use the animation, as mentioned, you must use keyframes and give your animation and name and duration.

Style as needed.

<style>
    .dropbtn {
        background-color: linen;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.menu{
    background-color: aliceblue;
    text-align: center;
}
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: cornsilk;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: yellow;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
  animation-name: example;
  animation-duration: .4s;
    }


@keyframes example {
  from {opacity: 0;}
  to {opacity: 1;}
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.profile{
    border-radius: 100%;
}
</style>
<center>
<table height="10%">
<tr class="menu">
<td width="10%">
<div class="dropdown">
  <button class="dropbtn">SOALAN</button>
  <div class="dropdown-content">
    <a href="papar_topik.php">Kuiz</a>
    <a href="prestasi_topik.php">Keputusan</a>
  </div>
 </div></td>

Animation for DropDown CSS

1 Answers1