Jump to content
java

Fade In and Fade Out Slideshow

Recommended Posts

Use percentages, along with fill mode

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
   animation-fill-mode: forwards;
}
@-webkit-keyframes fade {
  0% {opacity: .4} 
  50% {opacity: 1}
  100% {opacity:0.4}
}

 

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, dsonesuk said:

Use percentages, along with fill mode


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
   animation-fill-mode: forwards;
}
@-webkit-keyframes fade {
  0% {opacity: .4} 
  50% {opacity: 1}
  100% {opacity:0.4}
}

 

How about crossfade? Is it possible?

Edited by java

Share this post


Link to post
Share on other sites

Yes! its possible, bit complicated, The idea is to get the previous image, and place it as a background using position: absolute with low z-index, then fade in what will be next image with higher z-index, because this image is layered above the bg image it will give effect that both are cross fading, but only the top layered image is.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×