1

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

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

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

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

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

1 ответ 1

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...)

14
  • Здесь именно исчезновение, а как сделать именно "выезд"?
    – W_0rld
    3 янв 2017 в 21:18
  • upd: разобрался.
    – W_0rld
    3 янв 2017 в 21:20
  • @W_0rld я просто прочитал Как мне сначала показать блок, а после 5 сек его скрыть поэтому и сделал то, что сделал))) ну "выезд" по аналогии. Разобрались - славно 3 янв 2017 в 21:29
  • я так понял не все браузеры понимают команды и для каждого надо писать свою? когда это кончится?
    – W_0rld
    3 янв 2017 в 21:42
  • @W_0rld на самом деле зависит от того, что хочется. Можно смотреть предварительно на caniuse.com ....... но вообще в наше время это не проблема. т.к. во многих IDE есть автоматическое написание префиксов (так сказать групповое написание/редактирование).... или вообще через gulp настраивать, чтоб тот при сборке дописывал префиксы там, где нужно...... так что всё это сейчас легче 3 янв 2017 в 21:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.