Задержка анимации блока на CSS 3

393

05 января 2017, 07:00

Делаю блок оповещений, он выползает снизу. Делаю так:

-webkit-transform:translate(0,0); (когда надо показать блок)

-webkit-transform:translate(0,100%); (когда надо скрыть)

Как мне сначала показать блок, а после 5 сек его скрыть?

Делал на js, но пришел дядя с форума и сказал что намного лучше сделать все на css.

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; - к элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (see more...)