I make a block of alerts, it crawls out from below. I do this:

-webkit-transform:translate(0,0); (when you need to show a block)

-webkit-transform:translate(0,100%); (when you need to hide)

How do I show the block first and hide it after 5 seconds?

Did on js, but the uncle came from a forum and told that it is much better to make everything on css.

    1 answer 1

     @-webkit-keyframes slideout { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes slideout { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes slideout { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slideout { 0% { opacity: 1; } 100% { opacity: 0; } } div { position: absolute; width: 50px; height: 50px; top: 10px; left: 10px; background-color: black; opacity: 1; -webkit-animation: slideout 1s ease 3s forwards; -moz-animation: slideout 1s ease 3s forwards; -o-animation: slideout 1s ease 3s forwards; animation: slideout 1s ease 3s forwards; } 
     <div></div>

    animation-fill-mode: forwards; - the element of the last keyframe is applied to the element at the end of the animation. What this frame will look like in the animation sequence depends on the combination of the values ​​of the animation-direction and animation-iteration-count properties ( see more ... )

    • Here is the disappearance, and how to make exactly the "exit"? - W_0rld
    • upd: figured it out. - W_0rld
    • I just read @ W_0rld. Как мне сначала показать блок, а после 5 сек его скрыть it, so I did what I did))) “exit” by analogy. Understood - nice - Alexey Shimansky
    • I understand that not all browsers understand commands and for everyone you need to write your own? when will it end? - W_0rld
    • @ W_0rld actually depends on what you want. You can look in advance at caniuse.com ....... but in general this time is not a problem. because many IDEs have automatic prefixes (group writing / editing, so to speak) .... or even configure gulp so that it gulp up prefixes where necessary in assembly ... so that it is all easier now - Alexey Shimansky