我目前正在尝试用HTML和CSS创建一个眨眼的效果。我的问题是下面的部分（眼睑）移动的方向不对。它应该反向移动才能看起来像想要的效果。
我已经厌倦了很多事情，使它的工作，不知道还有什么要做的。这是我的CSS。这是一个问题，一些JS是必要的？

.upper-eye {
  background: linear-gradient(to bottom, 
                    rgb(0, 0, 0),  
                    rgba(255,255,255, 0) 10%);
  width: 100%;
  height: 300%;
  z-index: 0;
  position: fixed;
  top:0;
  left:0;
  animation: bounce 2s linear infinite;
}

.under-eye {
  background: linear-gradient(to top, 
            rgb(0, 0, 0),  
            rgba(255,255,255, 0) 10%);
  width: 100%;
  height: 300%;
  z-index: 100;
  position: fixed;
  bottom: -10px;
  left: 0; 
  animation: bounce 2s linear infinite;

} 

  @-webkit-keyframes bounce { 
               0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
               40% {-webkit-transform: translateY(-30px);} 
               60% {-webkit-transform: translateY(-15px);} 
            } 
            
            @keyframes bounce { 
               0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
               40% {transform: translateY(-30px);} 
               60% {transform: translateY(-15px);} 
            }
            
            .bounce { 
               -webkit-animation-name: bounce; 
               animation-name: bounce; 
            }