弹窗的抖动显示效果


场景:

弹窗在弹出显示时,有个原地先向上抖动,后有回到原位置的抖动效果

代码:

主要是在弹出部分,加上动画(

animation: detail .3s linear forwards;

detail:关键帧, .3s动画持续时间,linear:动画速度,forwards: animation-fill-mode:forwards(目标将保留由执行期间遇到的最后一个关键帧计算值)

detail关键帧:

  @keyframes detail{       0%{transform: translateY(-1020rpx);}       50%{transform: translateY(-10rpx);}       75%{transform: translateY(-80rpx);}       100%{transform: translateY(-10rpx);}     } 关键帧效果从屏幕外(-1020rpx)出来,后位移到-10rpx,再向上抖动(-80rpx),再回到自身位置(-10rpx)

相关