@keyframes long {
  0% {
      width: 0
  }

  25% {
      width: 25%
  }

  50% {
      width: 100%
  }

  75% {
      width: 25%
  }

  to {
      width: 0
  }
}
 
@keyframes scaleIn {

    from { opacity: 1; -webkit-transform: scale(1); transform: scale(1);  }
    
    to { -webkit-transform: scale(1.05); transform: scale(1.05);}
    
    }
    

    @keyframes topFloat {
        from {
            transform: translateY(20px);
            opacity: 0;
            -webkit-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
    }
    
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
      @keyframes circle-opacitytop{
        from {
            opacity: 1;
            transform:translate(-50%,-50%) scale(1);
        }
        to {
            opacity: 0;
            transform:translate(-50%,-50%) scale(2);
        }
    }  

@keyframes rotate {
    50% {
        border-radius: 38%;
        transform: rotate(180deg);
    } 100% {
        border-radius: 45%;
        transform: rotate(360deg);
    }
}
@keyframes previewShapeY {
    0%, 100% {
      transform: translateY(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateY(-10px);
    }
    20%, 40%, 60%, 80% {
      transform: translateY(10px);
    }
  }