css 闪烁板 - 附加动画。这是一个CSS，当图层变为活动状态时，轻弹标题淡入和下拉。你会需要

Posted 2021-05-13

/*----flick animation----*/

.flick-title {
  opacity: 0;
}

.flickerplate li.active .flick-title {
  -webkit-animation: flickAnimation 1s forwards ease-out;
          animation: flickAnimation 1s forwards ease-out;
}

@-webkit-keyframes flickAnimation {
  0% {
    opacity:0;
    filter: alpha(opacity=0); 
    -webkit-transform: translate(0, -2em); 
  }

  100% {
    opacity:1;
    filter: alpha(opacity=100); 
    -webkit-transform: translate(0, 0); 
  }
}

@keyframes flickAnimation {
  0% {
    opacity:0;
    filter: alpha(opacity=0); 
            transform: translate(0, -2em);
  }

  100% {
    opacity:1;
    filter: alpha(opacity=100); 
            transform: translate(0, 0);
  }
}

/*---- end flick animation----*/