I found this neat tutorial on background image slideshows here http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
I'm trying to get the photo to ease-in and then stop. I don't want it to go away. I've tried altering the css code by taking out the "ease-out" and adding in another "ease-in". No matter what I do, it still performs an ease-out. Any suggestions?
/* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-in; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
I happen to have watched this video today and I think it can help you to understand how basic animations work: http://css-tricks.com/video-screencasts/97-intro-to-css-animations/
In short, you'll want your keyframes from opacity: 0 to opacity: 1 (or 0% and 100%) and run the animation only once... really, watch the video :P
opacity: 0
opacity: 1
Cool, Checking it out right now.
I found this neat tutorial on background image slideshows here http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
I'm trying to get the photo to ease-in and then stop. I don't want it to go away. I've tried altering the css code by taking out the "ease-out" and adding in another "ease-in". No matter what I do, it still performs an ease-out. Any suggestions?
/* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-in; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }
I happen to have watched this video today and I think it can help you to understand how basic animations work: http://css-tricks.com/video-screencasts/97-intro-to-css-animations/
In short, you'll want your keyframes from
opacity: 0toopacity: 1(or 0% and 100%) and run the animation only once... really, watch the video :PCool, Checking it out right now.