@keyframes animate

{

    0%

    {

        background-position: 0px 100px;

    }

      10%

    {

        background-position: 0px 100px;

    }

    40%

    {

        background-position: 1000px -70px;

    }

    80%

    {

        background-position: 2000px -80px;

    }

    100%

    {

        background-position: 2500px 100px;

    }

}



.cup2{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 125px;

    height: 125px;

    border: 6px solid #262626;

    border-radius: 50%;

    background: linear-gradient(180deg, rgba(252,252,252,1) 0%, rgba(224,222,222,1) 48%, rgba(195,195,195,1) 100%);

}



.cup

{

    position: absolute;    

    text-align: center;

    vertical-align: middle;

    top: 0px;

    left: 0px;

    width: 125px;

    height: 125px;

    border: 6px solid #262626;

    border-radius: 50%;

    background-image: url(https://i.ibb.co/gSXvJ35/water.png);

    background-repeat: repeat-x;

    animation: animate 9s linear infinite;

    box-shadow: 0 0 0 6px #FFF, 0 20px 35px rgba(0,0,0,1);

}

.text{

    position: absolute; 

    width: 165px;  

    text-shadow: 1.4px 1.9px #cdcdcd;

    font-family: 'Shrikhand', cursive;

    word-wrap: break-word;

    font-size: 12pt;

    height: 0em;

    line-height: 1em;

    color: #103578;

    text-align: center;

    vertical-align: middle;

    top: 52px;

    left: -14px;

}

.cup3{

    position: absolute; 

    top: 5px;

    left: 5px;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: transparent;

  	opacity: 1;

}

.cup3:hover{

    cursor: pointer;

  	animation: pulse 1.3s;

    

}



@keyframes pulse {

	0% {

		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);

	}



	70% {

		box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);

	}



	100% {

		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

	}

}