小程序，显示隐藏动画;位移动画， 底弹窗动画，旋转动画

.root {
   100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;

  animation:fadenum 0.6s;
}

@-webkit-keyframes fadenum{ /*设置内容由隐藏变为显示*/
   0%{opacity: 0;}
   100%{opacity: 1;}
}

　　

.root {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: white;

  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  animation: fadeBottomIn 0.3s;
}

@keyframes fadeBottomIn {/*位移动画*/
  0% {
    transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

 底弹窗动画：

.root {
  height: 50vh;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: white;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  animation-name: slideContentUp;
  animation-duration: 0.3s;
}

@keyframes slideContentUp {
  from {
    transform: translateY(100%); /*设置为正数则底部弹出来，负数则相反*/
  }
  to {
    transform: translateY(0%);
  }
}

旋转动画：

.loading {
  width: 150rpx;
  height: 150rpx;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  animation:myRotate 1s linear infinite;
  z-index: 999;
}

@keyframes myRotate{
  0%{ -webkit-transform: rotate(0deg);}
  50%{ -webkit-transform: rotate(-180deg);}
  100%{ -webkit-transform: rotate(-360deg);}
}