Fading Layout Images Back and Forth
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Fading Layout Images Back and Forth
@Mikari: ooo there's a CSS-only solution? That sounds intriguing! :D
Re: Fading Layout Images Back and Forth
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.
-
- Administrator
- Posts: 2535
- Joined: Thu Jun 21, 2012 5:49 pm
- Contact:
Re: Fading Layout Images Back and Forth
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)
Thank you Mikari for adding it! (Personally the pure-CSS is my favorite technique :D)
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Fading Layout Images Back and Forth
@Mikari: Oooo awesome! That is a new webdesign toy I must play with now :D :D :D
Re: Fading Layout Images Back and Forth
@dubiousdisc: I like pure CSS too ^_^
@CuriousLittleBird: Yes play with it! :D
@CuriousLittleBird: Yes play with it! :D