前端常用的css动画

1. 按钮呼吸状态

@keyframes breathe {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.98);
  }
  50% {
    transform: scale(0.95);
  }
  75% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

2. 弹窗底部划出 划走

 @keyframes slideIn {
    from {
      bottom: -80vh;
    }
    to {
      bottom: 0;
    }
  }

  @keyframes slideOut {
    from {
      bottom: 0;
    }
    to {
      bottom: -80vh;
    }
  }

3. 光标闪烁

@keyframes van-cursor-flicker {
    from {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }