.square{
    height: 50px;
    width: 50px;
    animation: myan 4s infinite;
}
@keyframes myan {
    0%, 100% {
        background: blue;
      }
      50% {
        background: green;
      }
}

.test {
    width: 100px;
    height: 100px;
    right: -25px;
    border-radius: 50%;
    outline: blue solid 2px;
    backdrop-filter: blur(8px);
    position: relative;
    animation: mymove 5s ease-in-out infinite;
  }
  
  @keyframes mymove {
    from {top: 0px;}
    50% {top: 150px;}
    to {top: 0px;}
  }

  .bubble-cage{
    overflow: hidden;
    position: fixed;
    z-index: -1;
    height: 100vh;
    width: 100vw;
    bottom: 0px;
  }
  #bubble {
    z-index: -1;
    width: 500px;
    height: 500px;
    bottom: -0vh;
    border-radius: 50%;
    background-color: cyan;
    filter: blur(16px);
    position: absolute;
    animation: bubblemove 10s linear infinite;
  }
  @keyframes bubblemove {
    from {
      bottom: 0vh;
      opacity: 0%;
    }
    20% {
      opacity: 10%;
    }
    to {
      bottom: 50vh;
      opacity: 0%;
    }
  }