Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

fadeIn animation help


Marzon

Question

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?

Edited by Marzon
Link to post
  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...