Płynne pokazanie div js - pytanie

Question

Mam taki div

Taki do niego skrypt mam 

function alert_box() {
    document.getElementById("alert-box").style.display='block';
}

A w CSS ma on display:none;

Jak zrobić aby się jakąś rozwinął czy coś takiego?
I aby później się zamknął po jakimś czasie.

Answer 1

Proszę, tu masz gotowe przykłady: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations przy użyciu @keyframes.

A jeśli chcesz animację odpalać na jakąś akcję to zrób sobie po prostu jakąś animkę z @keyframes i klasę, która to odpala, a następnie w JS na jakąś akcję po prostu dodaj do Twojego elementu tą klasę.

Comments

A żeby po np tych 3 sekundach powróciło do display: none;?

---

Zrobiłem tak

    setTimeout(function(){
        document.getElementById("alert-box").style.display='none';
    }, 3000);

 

ale on po prostu znika, a nie chowa się jak zrobiłem to z animacją

---

display nie jest animowalne, zrób po za display też np. opacity i dopiero gdy obiekt zniknie z pola widzenia przez opacity to wrzuć display none.