0

I have this HTML:

.orderData_button {
  background-color: #FF5733;
  border: none;
  color: white;
  padding: 5px 60px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  transition: width 1s ease-in-out
}
.slideDown_orderData {
  display: none;
  position: relative;
  z-index: 3;
  transition: width 1s ease-in-out
}
.orderData_button:hover .slideDown_orderData {
  display: block;
  width: 100%;
}
.orderData_button:hover {
  width: 50%;
}
#orderData_2 {
  font-size: 20px;
  text-align: center;
}
<div class="orderData_button">
  <p>Your Orders</p>
  <p></p>
  <div class="slideDown_orderData">
    <p id="orderData_2"></p>
  </div>
</div>

My orderData_button and slideDown_orderData will not transition width, but will change instantly. Why is this? (Yes I have look all over google, with no success)

-CSS noob

chirag
  • 1,761
  • 1
  • 17
  • 33
Draxy
  • 565
  • 3
  • 6
  • 20
  • 2
    Possible duplicate of [CSS3 transition doesn't work with display property](http://stackoverflow.com/questions/22103006/css3-transition-doesnt-work-with-display-property) – Sebastian Simon Oct 10 '16 at 03:05
  • Basically, you can’t transition with the `display` property changing. Use `visibility` instead. – Sebastian Simon Oct 10 '16 at 03:06
  • Can you elaborate further? @Xufox – Draxy Oct 10 '16 at 03:19
  • In my opinion, it's better to use javascript. Animate the width the on complete callback. Change the display into none. – hdotluna Oct 10 '16 at 03:54
  • @Draxy Instead of `display: none;` you use `visibility: hidden;`, instead of `display: block;` you use `visibility: visible;`. `display` is not an animatable CSS property, so you can’t use it in transitions. – Sebastian Simon Oct 10 '16 at 04:01

0 Answers0