Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.



Programming and Learning from SD

I needed to fade out an image, then fade in the new image. For this post, I’m not concerned with the coordination with the loading delay of the new image. I will show how fade out and in a single image.

This MSDN post from December, 2011 was very useful and worked well today in June 2015. Support is now nearly ubiquitous, since IE 10, except for Opera Mini, so we don’t have to worry about that.

Using the @keyframes from CSS3, this is a relatively easy task. No jQuery needed Smile.

@keyframes demo {
    from {
      animation-timing-function: ease;
      opacity: 1;
    }
    50% {
      animation-timing-function: ease-in;
      opacity: 0;
    }
    to {
      animation-timing-function: ease-inout;
      opacity: 1;
    }
}

img:hover
{
    animation-delay: 0s;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-name: demo;
}
<img src="http://lorempixel.com/400/200/nature/">

I created a JsFiddle to demo the fade out and in on hover using the @keyframes. I also added an answer to a StackOverflow question.

Posted on Monday, June 22, 2015 2:44 PM | Back to top


Comments on this post: CSS3 Fade out and Fade in with CSS3 Animations

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Aligned | Powered by: GeeksWithBlogs.net