keyframes animation doesn't work for some reason

user_14355780 0
Viewed 180

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

css-animations css html
1 Answers

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>

user_99771510
Related