Блог

Главная - Вопросы по программированию - Создайте выдвижной ящик CSS, который появится через заданный промежуток времени

Создайте выдвижной ящик CSS, который появится через заданный промежуток времени

#html #css #css-animations

#HTML #css #css-анимации

Вопрос:

Я хочу создать выдвижной ящик CSS, который появится в нижней части страницы через несколько секунд. Я довольно близко подошел к следующему. Я использую transform: translate(100%, 0); in #supportroll , чтобы скрыть div в начале.

Проблема в том, что после завершения анимации div исчезает. Если я удалю это начальное преобразование, div появится на экране с самого начала. Я пытался использовать display в ключевых кадрах для переключения с none на block , но это не позволяет div появляться или анимироваться вообще. Какое хорошее решение для предотвращения появления div до animation-delay времени начала?

 <html>
<body>

      <div id="supportroll">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </div>

</body>
</html>

CSS:

 #supportroll {
 border: 2px solid #60047A;
 position: fixed;
 background-color: #012e2f;
 color: white;
 padding: 20px;
 right: 0px;
 bottom: 50px;
 width: 100px;
 transform: translate(100%, 0);
 animation-delay: 1s;
 animation-play-state: running;
 animation-iteration-count: 1;
 animation-duration: 5s;
 animation-name: supportanimation;
}

@keyframes supportanimation {
 from {
  transform: translate(100%, 0);
 }
 to {
  transform: translate(0%, 0);
 }
}

Скрипка:https://jsfiddle.net/1e4zLtm7/1 /

Комментарии:

1. Вы смотрели на animation-fill-mode , в частности, на значение свойства forwards ?

2. Что сказано в комментарии выше!

Ответ №1:

Вы можете как бы «взломать» «период времени» следующим образом:

 #supportroll {
 border: 2px solid #60047A;
 position: fixed;
 background-color: #012e2f;
 color: white;
 padding: 20px;
 right: 0px;
 bottom: 50px;
 width: 100px;
 transform: translate(0%, 0);
 animation-delay: 0s; /* instead of 1 sec */
 animation-play-state: running;
 animation-iteration-count: 1;
 animation-duration: 6s; /* instead of 5 sec */
 animation-name: supportanimation;
 
 opacity: 1; /* fade-in effect */

}

@keyframes supportanimation {
 from {
  transform: translate(200%, 0);
  opacity:0;
 }
 to {
  transform: translate(0%, 0);
  opacity: 1;
 }
}  
 <div id="supportroll">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>