-1

I'm currently working on a project that uses a flex-basis transition on hover. It's smooth in Chrome and FF but not in IE or Safari. Is there a good fallback for this? maybe some js?

CSS

.color {
  opacity:0;
  -o-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  -ms-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  -moz-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  -webkit-transition: flex-basis 500ms, opacity 500ms ease-in-out;
  transition: flex-basis 500ms, opacity 500ms ease-in-out;
}

.color:hover {
  flex-basis: 95%;
  opacity:1;
}

Thanks!

A link to my WIP Codepen

Brian
  • 3,850
  • 3
  • 21
  • 37
Aaron
  • 29
  • 8

1 Answers1

0

So after a lot of research and testing I've found that most browsers don't recognize flex-basis as a transitional property; However I did find a solution.

I'm now using padding instead of flex-basis, and am animating the padding on hover. This works wonderfully except in all IE browsers. IE doesn't recognize padding as a transitional property. Margin would have been better, but It is kind of buggy.

.color {
  padding:0;
  transition: padding 500ms ease-in-out;
}

.color:hover {
  padding:0 40%;
}

codepen

Aaron
  • 29
  • 8