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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.root {   width: 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);}
}