@keyframes onhover {
    0% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

@keyframes show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showandsliderighttoleft {
    0% {
        opacity: 0;
        left: 100px;
    }


    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes sliderighttoleft {
    0% {
        left: 100px;
    }

    100% {
        left: 0;
    }
}




@keyframes mouseEffect {
  0% {
    top: 0;
  }
  25% {
    top: 20px;
  }
  50% {
    top: 0;
  }
  100% {
    top: 0;
  }
}

@keyframes mouseButtonEffect {
  0% {
    opacity: 0;
    top: -10px;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
    top: 15px;
  }
  45% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    top: 15px;
  }
  100% {
    opacity: 0;
    top: 15px;
  }
}