微信小程序弹出层动画特效

.rules_modal_cont{
  height:800rpx;
  width:200rpx;
  -webkit-animation: showZeroAlert 0.3s;
  animation: showZeroAlert 0.3s;
}
@keyframes showZeroAlert {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  45% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  80% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

动画效果就是先变大再变小,有一个“弹”的动作~

posted @ 2018-03-30 17:03  Basu  阅读(3634)  评论(0编辑  收藏  举报