I'm trying to translation display property with css but I failed

Asked Jul 04 '20 at 11:37

Active Jul 04 '20 at 11:46

Viewed 23 times

I'm trying to translation display property with css but I failed. I wan't to transition display property for 3 second but Its doesn't work.

.container {
  display: block;
}

.container:hover {
  display: flex;
  transition: display 3s;
}

.items {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  width: 100px;
  height: 100px;
  margin: 5px;
  background-color: red;
}

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

edited Jul 04 '20 at 11:46

asked Jul 04 '20 at 11:37

Jay

The display property can't be "transitioned". – VXp Jul 04 '20 at 11:40
let's suppose you can do such transition how it should work? anyone can imagine their own animation – Temani Afif Jul 04 '20 at 11:45
See the list of what can be transited http://css3.bradshawenterprises.com/transitions/ – focus.style Jul 04 '20 at 11:46

I'm trying to translation display property with css but I failed

0 Answers0