Playing an Animation with Function Call

I am working on a game that needs an animation to play when I call a function. The function moves two divs slowly up and down similarly to a slot machine. Here are some animation frames:
Start:
Good Image
In-between:
Good to Bad
End:
Bad

This is being displayed with html and CSS. Here is the animation code:
Html

<div id="day-swapper-contain" onclick="day_switch()">
                    <div class="day-swapper-inner-green center">
                        <div>Good</div>
                    </div>
                    <div class="day-swapper-inner-red center">
                        <div>Bad</div>
                    </div>
                </div>

CSS

#day-swapper-contain{
    width: 15%;
    overflow: hidden;
    height: 75px;
}

.day-swapper-inner-red, .day-swapper-inner-green{
    color: var(--text-color);
    text-align: center;
    font-size: 4rem;
    line-height: 5rem;
    height: 100%;
    width: 100%;
    border: var(--bg-color) solid 5px;
    justify-content: space-evenly;
    position: relative;
    animation-name: good-bad;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-play-state: paused;
}

.day-swapper-inner-green{
    background-color: green;
}

.day-swapper-inner-red{
    background-color: red;
}

@keyframes good-bad{
    0% {
        top: 0px;
    }
    100% {
        top: -75px;
    }
}

Here is the JavaScript I am using to trying to play it at a function call.

let good_day = document.querySelector('.day-swapper-inner-green');
let bad_day = document.querySelector('.day-swapper-inner-red');

let good_day_state = true;

function day_switch(){
    state = !good_day_state;
    if (state){
        good_day.style.animationDirection = 'reverse';
        bad_day.style.animationDirection = 'reverse';
        good_day.style.animationPlayState = 'running';
        bad_day.style.animationPlayState = 'running';
    } else {
        good_day.style.animationDirection = 'normal';
        bad_day.style.animationDirection = 'normal';
        good_day.style.animationPlayState = 'running';
        bad_day.style.animationPlayState = 'running';
    }
    return state;
}

Is there anything I am doing wrong?
Is there any functions I should know to get this to work?
Is there any code you could show me to help me with my implementation?
All help is appreciated.

Couple of issues.

  1. Your onclick references a function that does not exist of the code you posted above.

  2. The play method is for playing media. To get your animation to start, you need to set the animationPlayState property to running. Your CSS had the animation paused by default.

Is there any way I can make the animation play once? I was looking into maybe incrementing the animationIterationCount by 1 so the animation will iterate only once when I call the function.

Here is my final solution that got it just the way I wanted:
CSS:

#day-swapper-contain{
    width: 15%;
    overflow: hidden;
    height: 75px;
}

.day-swapper-inner-red, .day-swapper-inner-green{
    color: var(--text-color);
    text-align: center;
    font-size: 4rem;
    line-height: 5rem;
    height: 100%;
    width: 100%;
    border: var(--bg-color) solid 5px;
    justify-content: space-evenly;
    position: relative;
    animation-name: good-bad;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-play-state: paused;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.day-swapper-inner-green{
    background-color: green;
    font-size: 3rem;
}

.day-swapper-inner-red{
    background-color: red;
}

@keyframes good-bad{
    0% {
        top: 0px;
    }
    100% {
        top: -72px;
    }
}

JavaScript:

const good_day = document.getElementById('good_day');
const bad_day = document.getElementById('bad_day');

let good_day_state = true;

function day_switch(){
    good_day.style.animationPlayState = 'running';
    bad_day.style.animationPlayState = 'running';
    setTimeout(() => { good_day.style.animationPlayState = 'paused'}
    , 3000);
    setTimeout(() => { bad_day.style.animationPlayState = 'paused'}
    , 3000);
}
Thank You everyone for all the help!

I refactored your approach to get rid of the setTimeout and simplified the overall structure and logic of everything.

HTML

<div class="container">
  <div class="slider" onclick="day_switch()">
    <div class="good-day">Good</div>
    <div class="bad-day">Bad</div>
  </div>
</div>

CSS

.container {
  width: 150px;
  overflow: hidden;
  height: 75px;
}

.good-day,
.bad-day {
  text-align: center;
  font-size: 3rem;
  line-height: 5rem;
  width: 100%;
}

.good-day {
  background-color: green;
}

.bad-day {
  background-color: red;
}

.slider {
  animation-duration: 3s;
  animation-fill-mode: forwards;
  position: relative;
}

.animate-good-to-bad-true {
  animation-name: good-to-bad;
}

.animate-good-to-bad-false {
  animation-name: bad-to-good;
}

@keyframes good-to-bad {
  0% {
    top: 0px;
  }
  100% {
    top: -80px;
  }
}

@keyframes bad-to-good {
  0% {
    top: -80px;
  }
  100% {
    top: 0px;
  }
}

JS

const slider = document.querySelector(".slider");
let goodDayState = true;

function day_switch() {
  slider.classList.add("animate-good-to-bad-" + goodDayState);
  slider.classList.remove("animate-good-to-bad-" + !goodDayState);
  goodDayState = !goodDayState;
}