How to make css behavior the same in all browsers?

Question

css

There is a button that, when the cursor hits it, smoothly appears and disappears smoothly.
In FireFox it works fine, but in Chrome the behavior changes. What can be done to
avoid this? If it helps, I use sass and gulp. Latest browsers.
Here is the code for which I sin, well, there is almost no other -

.container-mouseleave {
  opacity: 0.2;

  transition: opacity 0.3s, visibility 0.3s;
}

.container-mouseenter {
  opacity: 0.5;

  transition: opacity 0.3s, visibility 0.3s;
}

Answer 1

Use for each browser its own version:

-webkit-transition: all 0.1s //Это Chrome, Opera и прочие
-moz-transition: 0.2s.... //Mozilla
-ms-transition //IE

Vendor properties, if anything

Answer 2

do cross-browser compatibility, browsers can support different style rules in different ways