Pam: And change the 15s input, etc.

Nocum: I’m using precisely your numbers in -webkit-keyframes

Wigington: Not bothering with the others right now since i’m not using them

Pam: Yeah but just copying the keyframes won’t cut it. I calculated out the length of the animation time and all things so they worked together.

Pam: Also yes, you are. The delay is used, the animation duration is used, etc.

Pam: I started with how long I wanted each slide to show, and how long I wanted the cross-fade to take. Then from that I calculated out what percentages I needed to use for the time stops in the animation keyframes.

Pam: I calculate that around line 88 in the source.

Gasiewski: This is precisely what i’m struggling with, where is information on cross-fades?

Pam: It’s all here: https://temp.asmcbain.net/htmlcss/slideshows/slideshow-fade-nojs.html

Guzzardo: I’m definitely looking at it

Sholders: But i’m saying there isnt’ a nice guide besides your source that covers this

Araneo: Not that google is presenting to me at least

Pam: But what’s wrong with my source? the comments lay out how to calculate out the durations.

Pam: The comments on line 84, line 48,. it tells you everything.

Brothers: What i’m confused about, e.g. is that there’s an opacity of 1 at 25% and then an opacity of 0 at 26.6%,

Manhardt: From 26.6% to 100%, there’s an opacity of 0

Porst: That makes me think the image isn’t going to be visible, but it is

Lehew: So i’m confused how that works

Pam: So the 25% to 26.6% is the fade.

Pam: The 26.6% to 100% is the wait.

Pam: And 0-25% is the I’m-visible time.

Pam: With the animation delays on each, the window is pushed back by 16s each time. Which is the visible time + 1s cross fade.

Pam: The time that it’s not visible the wait is so that it can wait out all the other images.

Gladhill: Pam: based on your calculations, i was able to get it to behave in a similar fashion

Topps: That sounds like i don’t care for your help though, so i would ignore that

Pam: Ok. I thought the calculations were pretty straight forward. So the total animation time has to be the length of all images cycles added together so that that each image has time to show itself and wait the appropriate amount of time to go again.

Bogumil: I really am appreciative, i’m just struggling over here

Pam: In my setup I started with 15s for full visibility, and 1s where it fades. This is 16s total and I had 4 images, so you get 64s.

Pam: Now the percentages for the keyframes are going to be based on that, because that’s their duration.

Pam: So I took and I want a fade of 1s, so that’s 1/64 and I use that as the first time post so that it fades in. My items start with an opacity of zero.

Yovan: Okay, that makes sense

Pam: Though I’m unsure of my notes at lines 89 and 89. I seem to have added the fade wait twice. However, it works. So uh. follow the notes. 😀

Pam: I wrote this a while ago.

Peluse: Does key-frames represent the animation for all 4 slides?

Vostal: Or does it represent the animation for each slide?

Pam: The same animation is used on all slides. So it has to represent the entire duration of all slides, which is why much of it is waiting.

Pam: With an opacity of zero

Claybrooks: Pam: do you have a bitcoin address?

Miskin: I would like to tip you

Isaiah: If you’re okay with that

Herbert: I’ve struggled with css animation for a long time, and this is very helpful

Pam: No, no, that’s fine. However you have an answer on Stackoverflow now though it seems.

Pam: I did that for this guy: https://articles.asmcbain.net/articles/atomicanim/demo.html

Pinegar: That really is amazing