How to reveal an element based off animation?

I have an animation that extends down and then to the right to display a grid of images. Given that the .addEventListener(“click”) changes the display to grid, it reveals the content immediately. I want to resolve this in one of two ways:

  1. Wait for the display: “grid” change to fade-in when the border animation is complete
  2. As the border grows in size to the right, the pre-populated images are revealed.

Hopefully this quick graphic adds some context:
enter image description here

Here is what I have so far for code

const showButton = document.getElementById("option-button");
const optionsGrid = document.getElementById("option-grid");
const optionRadios = document.getElementsByClassName("option-radio");
const optionOne = document.getElementById("1");
const optionTwo = document.getElementById("2");
const optionThree = document.getElementById("3");
const optionFour = document.getElementById("4");
const optionOneImage = document.getElementById("option-1-image").src;
const optionTwoImage = document.getElementById("option-2-image").src;
const optionThreeImage = document.getElementById("option-3-image").src;
const optionFourImage = document.getElementById("option-4-image").src;

showButton.addEventListener("click", showOptions);
function showOptions() {
  let array = [];
  
  for (let i = 0; i < optionRadios.length; i++) {
    array.push(optionRadios[i].classList.value);
  }
  
  if (array.includes("option-radio hide")) {
    optionsGrid.style.animation = "open-animation 500ms linear 1";
      optionsGrid.style.display = "grid";
    for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("hide", "active");
   }
  } else {
    optionsGrid.style.display = "none";
    for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("active", "hide");
   }
  } 
}

optionOne.addEventListener("click", function() {
  showButton.style.backgroundImage = `url("${optionOneImage}")`;
  showButton.innerHTML = "";
  
  optionsGrid.style.display = "none";
  for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("active", "hide");
   }
});

optionTwo.addEventListener("click", function() {
  showButton.style.backgroundImage = `url("${optionTwoImage}")`;
  showButton.innerHTML = "";
  
  optionsGrid.style.display = "none";
  for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("active", "hide");
   }
});

optionThree.addEventListener("click", function() {
  showButton.style.backgroundImage = `url("${optionThreeImage}")`;
  showButton.innerHTML = "";
  
  optionsGrid.style.display = "none";
  for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("active", "hide");
   }
});

optionFour.addEventListener("click", function() {
  showButton.style.backgroundImage = `url("${optionFourImage}")`;
  showButton.innerHTML = "";
  
  optionsGrid.style.display = "none";
  for (let i = 0; i < optionRadios.length; i++) {
    optionRadios[i].classList.replace("active", "hide");
   }
});
.hide {
  display: none;
}

.active {
  display: block;
}

#option-button {
  width: 600px;
  height: 200px;
}

#option-grid {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  width: 1250px;
  height: 450px;
  place-items: center;
  border: 5px solid black;
  border-radius: 10px;
}

@keyframes open-animation {
  0% {
    height: 10px;
    width: 10px;
  }
  50% {
    height: 450px;
    width: 10px;
  }
  100% {
    width: 1250px;
  }
}
<fieldset id="console-select">
  <legend>Radio Option</legend>
  <button type="button" id="option-button">Select</button>
  <div id="option-grid">
    <div class="option-radio hide">
      <label for="1">
        <input type="radio" name="option" value="1" id="1" hidden>
        <img src="https://placehold.co/600x200" id="option-1-image">
      </label>
    </div>
    <div class="option-radio hide">
      <label for="2">
        <input type="radio" name="option" value="2" id="2" hidden>
        <img src="https://placehold.co/600x199" id="option-2-image">
      </label>
    </div>
    <div class="option-radio hide">
      <label for="3">
        <input type="radio" name="option" value="3" id="3" hidden>
        <img src="https://placehold.co/600x198" id="option-3-image">
      </label>
    </div>
    <div class="option-radio hide">
      <label for="4">
        <input type="radio" name="option" value="4" id="4" hidden>
        <img src="https://placehold.co/600x197" id="option-4-image">
      </label>
    </div>
  </div>
</fieldset>

Here is a link to the CodePen

Thank you for any help!