Button does slide-in and -out animations when I resize page (I don't want it to do that)

I'm trying to make a navigation button for my website that only appears when the site's at a certain size. It disappears and reappears when needed, but does a slide-in and -out animation that I definitely didn't code, and also lingers for ~0.5 seconds before disappearing. The nav button is also connected to simple Javascript that's supposed to bring up a pop-up overlay menu. I'm trying to get rid of both the resizing animation and the lingering 0.5 seconds.

The HTML for the button:

<button id="navbutton" onclick="openNav()">nav</button>

The CSS relating to the navbutton (note: everything I know about coding a website, I learned within the past 24 hours - if the code looks messy, that's because I don't know what I'm doing):

#navbutton {
    width: 70px;
    visibility: hidden;
    background-color: #FFF6EA;
    color: #545454;
    border: 2px solid #545454;
    padding: 13px;
    text-align: center;
    text-decoration: none;
    float: right;
    font: bold 16px/10px "IBM Plex Serif", serif;
    margin: 4px 2px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 30px;
}

#navbutton:hover {
    background-color: #545454;
    transition-duration: 0.4s;
    color: #FFF6EA;
}

@media screen and (max-width: 850px) {
    #navbutton {
        visibility: visible;
        margin-top: 20px;
    }
  }

The Javascript that connects to the overlay menu (the "navigation" div and "closeNav" button aren't linked here; I don't think the .js has anything to do with the unwarranted navbutton animations, but I'm adding it anyway in case it does):

function openNav() {
    document.getElementById("navigation").style.display = "100%";
}

function closeNav(){
    document.getElementById("navigation").style.display = "0%";
}

Also, the nav button currently doesn't do anything when I click it, despite it working a couple hours ago. I probably accidentally removed a detrimental piece of code, but that's not the point of this question - I'll figure it out/ask in another post. But if anything seems out of the ordinary, feel free to point it out.

I tried putting an extra float: right; after the navbutton turns visible, even though I know logically it doesn't do anything since it's already in the class (but a guy's desperate). I've also tried position: absolute; (and relative), because I thought "maybe this will make it stay in place and not move," but the animation is still there. I also tried deleting the transition-duration, but it didn't work.

To whoever can offer insight: I will owe you my firstborn. Thanks.

If you don't specify a transition-property value, the default value is all, which means that all properties that have a different value before and after the transition will be animated. However, if you explicitly set a transition-property value, only the specified properties will be animated. So I think this is your problem.Try setting the transition properties to only background-color and color.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function openNav() {
    document.getElementById("navigation").style.display = "100%";
}

function closeNav(){
    document.getElementById("navigation").style.display = "0%";
}

<!-- language: lang-css -->

#navbutton {
  width: 70px;
  visibility: hidden;
  background-color: #FFF6EA;
  color: #545454;
  border: 2px solid #545454;
  padding: 13px;
  text-align: center;
  text-decoration: none;
  float: right;
  font: bold 16px/10px "IBM Plex Serif", serif;
  margin: 4px 2px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 30px;
  transition-property: background-color, color;
  transition-duration: 0.4s;
}

#navbutton:hover {
  background-color: #545454;
  color: #FFF6EA;
}

@media screen and (max-width: 850px) {
  #navbutton {
      visibility: visible;
      margin-top: 20px;
  }
}

<!-- language: lang-html -->

<button id="navbutton" onclick="openNav()">nav</button>

<!-- end snippet -->