时间戳

首页 > 解决方案 > 创建一个在给定时间后出现的滑动 CSS 抽屉

html - 创建一个在给定时间后出现的滑动 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/

标签： htmlcsscss-animations

解决方案

您可以像这样“破解”“时间段”：

#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>

推荐阅读