html - 使通知栏从底部向上滑动

我有一个小的水平通知栏，它从页面底部向上滑动。

它显示的很好，但是当您打开页面时，它会快速闪烁，然后消失，然后向上滑动。

我如何修改它，使其在过渡发生之前不会出现/消失？

#notificationBarBottom {
  position: fixed;
  z-index: 101;
  bottom: 0;
  left: 0;
  right: 0;
  background: #5cb85c;
  color: #ffffff;
  text-align: center;
  line-height: 2.5;
  overflow: hidden;
  -webkit-box-shadow: 0 0 5px black;
  -moz-box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black;
}
@-webkit-keyframes slideDown {
  0%, 100% {
    -webkit-transform: translateY(0px);
  }
  10%,
  90% {
    -webkit-transform: translateY(510px);
  }
}
@-moz-keyframes slideDown {
  0%, 100% {
    -moz-transform: translateY(0px);
  }
  10%,
  90% {
    -moz-transform: translateY(510px);
  }
}
.cssanimations.csstransforms #notificationBarBottom {
  -webkit-transform: translateY(510px);
  -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
  -moz-transform: translateY(510px);
  -moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}

<div id="notificationBarBottom">Hello, human!</div>

此处是Jsfiddle演示：https://jsfiddle.net/cnfk36jd/（但不幸的是，该问题在此处不可见）。在此页面上，您可以看到“闪烁”的http://www.whycall.me/bannerTest.html

我在这里尝试了以下建议：https://css-tricks.com/pop-from-top-notification/并相当多地调整了translateY值，但这无济于事，不确定要做什么。

谢谢您的帮助

最佳答案

元素的初始位置是可见的，然后在页面加载期间，第一个平移插入以将其隐藏，因此闪烁。

这样做，将其放在底部bottom: -510px;下方，然后向上滑动。

更新的小提琴：https://jsfiddle.net/cnfk36jd/1/

#notificationBarBottom {
    position: fixed;
    z-index: 101;
    bottom: -510px;
    left: 0;
    right: 0;
    background: #5cb85c;
    color: #ffffff;
    text-align: center;
    line-height: 2.5;
    overflow: hidden;
    box-shadow:         0 0 5px black;
}
@keyframes slideDown {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-510px); }
}
#notificationBarBottom {
    animation: slideDown 2.5s ease forwards;
}
#close {
  display: none;
}

<div id="notificationBarBottom">Hello, human!</div>

旁注：我暂时删除了前缀属性，因此您需要重新添加它们

关于html - 使通知栏从底部向上滑动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39646065/