Page 2 of 2

Re: Fading Layout Images Back and Forth

Posted: Tue Dec 01, 2015 11:32 pm
by Robin
@Mikari: ooo there's a CSS-only solution? That sounds intriguing! :D

Re: Fading Layout Images Back and Forth

Posted: Wed Dec 02, 2015 2:00 pm
by Mikari
For the CSS version, basically you place images on top of each other via positioning and sync set their opacity keyframes. I have a small example at the bottom of this page http://azurelight.net/code22.php (the fruit pixels) in this case, there's a moment when the image area is empty during transition, but you can also set it so that the next image begins to fade in as soon as the previous fades away. If for example, you have 10 images and want to display each for 1 second, your animation would last 10 seconds with each opacity setting changing every 10% in the keyframe list.

Re: Fading Layout Images Back and Forth

Posted: Wed Dec 02, 2015 2:25 pm
by dubiousdisc
Oh right, there's also the animation! Omg how could I have forgotten that, I've made layouts with that technique XD

Thank you Mikari for adding it! (Personally the pure-CSS is my favorite technique :D)

Re: Fading Layout Images Back and Forth

Posted: Fri Dec 04, 2015 1:47 am
by Robin
@Mikari: Oooo awesome! That is a new webdesign toy I must play with now :D :D :D

Re: Fading Layout Images Back and Forth

Posted: Fri Dec 04, 2015 11:36 pm
by Mikari
@dubiousdisc: I like pure CSS too ^_^

@CuriousLittleBird: Yes play with it! :D