fadeIn animation help

Site URL: https://puma-orb-9lss.squarespace.com/projects

.white .portfolio-grid-overlay:hover .portfolio-title {
    animation: fadeIn 1s ease  !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

Hi, 

I'm trying to get a hover effect on hover on the project page. I got close to what I wanted but the animation only works when I move the cursor on and off the page. And doesn't work when I move the cursor between projects. 

Also, how can I get the title to fade out the same way it fades in?