标题下拉动画效果

导航原本样式

 

css中定义animation动画

animation: opacity 0.5s linear forwards;
    /* 兼容↓↓↓ */
    -webkit-animation: opacity 0.5s linear forwards;
    -moz-animation: opacity 0.5s linear forwards;

 

 

我这是添加了滚动条事件，具体看我上一篇博客

动画显示效果：

@keyframes opacity { // 可用于容器弹出
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(20%);
  }
}

 

最终实现效果