keyframes animation doesn't work for some reason - html

Question

I have some text in html that I want to animate
<div class="sofa-text inner-text">
<h1>Sofa, we have cool sofas</h1>
</div>
<div class="light-text inner-text">
<h1>our stand light is out-standing</h1>
</div>
and here's CSS
.inner-text {
display: none;
width: 100px;
height: 100px;
background-color: black;
position: absolute;
transition: 1s;
transform: translateY(200%);
animation-name: slide-up;
animation-duration: 2s;
animation-delay: .5s;
}
#keyframes slide-up{
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}
and I wanted to display this animation, after the button was clicked
let $sofaText = document.querySelector('.sofa')
let $lightText = document.querySelector('.light')
let showSofa = () => {
$sofaText.style.display = 'flex'
}
let showStand = () => {
$lightText.style.display = 'flex'
}
$sofaBtn.addEventListener('click', showSofa)
$standBtn.addEventListener('click', showStand)
However this doesn't work. I tested step by step and problem was in #keyframes. I even added -webkit but it still didn't work. I have no idea what's wrong with this

Answer 1

It's working you just can't see it because display:none;
function tran(){
let t = document.querySelector('.sofa-text');
t.classList.add("anim");
t.style.display = "flex";
}
.inner-text {
display:none;
width: 100px;
height: 100px;
background-color: black;
position: absolute;
transition: 1s;
transform: translateY(200%);
}
.anim{
animation-name: slide-up;
animation-duration: 2s;
animation-delay: .5s;
}
#keyframes slide-up{
0% {
transform: translateY(200%);
}
100% {
transform: translateY(0);
}
}
<button onclick="tran()">click</button>
<div class="sofa-text inner-text">
<h1>Sofa, we have cool sofas</h1>
</div>
<div class="light-text inner-text">
<h1>our stand light is out-standing</h1>
</div>