My current understanding for CSS animations if that you associate an anim name (defined with the

@keyframes

keyword) with some animation properties (e.g. duration, iteration-count, delay). e.g.

animation-name: test; animation-duration: 2.5s; animation-iteration-count: infinite

You can also specify multiple animations with their associated properties, all at the same time. See also: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#setting_multiple_animation_property_values

animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;

So an array of values, but 1 set per animation name

Then, you have the code in Compose for Web: https://github.com/JetBrains/compose-jb/blob/e2aba37e625def21b9aa136592a38a3e33b46[…]in/kotlin/org/jetbrains/compose/web/css/properties/animation.kt

data class CSSAnimation(
    val keyframesName: String,
    var duration: List<CSSSizeValue<out CSSUnitTime>>? = null,
    var timingFunction: List<AnimationTimingFunction>? = null,
    var delay: List<CSSSizeValue<out CSSUnitTime>>? = null,
    var iterationCount: List<Int?>? = null,
    var direction: List<AnimationDirection>? = null,
    var fillMode: List<AnimationFillMode>? = null,
    var playState: List<AnimationPlayState>? = null
) : CSSStyleValue {

Here, it's associating a single name to lists of values.

I'm looking at the syntax for the animation style: https://developer.mozilla.org/en-US/docs/Web/CSS/animation#formal_syntax and I think it agrees -- one animation name paired with one instance of each property per name.

animation = 
  <single-animation>#  

<single-animation> = 
  <time>                              ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]

But happy to be told I'm understanding things wrong... I guess I'm expecting either this:

CSSAnimation(
  val keyframesNames: List<String>,
  val duration: List<CSSSizeValue<CSSTimeUnit>>,
  ...
)

or better, this:

CSSAnimation(
  val keyframesName: String,
  val duration: CSSSizeValue<CSSTimeUnit>,

However, if this is a bug in the API, it seems like an important one to fix?

If you are plainly looking for a sample of using keyframes, I wrote a bug last week that shows how to use them. https://github.com/JetBrains/compose-jb/issues/2631#issue-1531316976

I'll look at your bug, but my point is I think the API is just wrong?

What does it even mean to specify iteractionCount = listOf(1, 2) with a single animation target?

In the code you linked above, even though you're not doing this, why is it allowed?

animation(rotationKeyframes) {
  duration(5.s, 7.s) // <---- Two durations?!
  timingFunction(AnimationTimingFunction.Linear)
}

IMO if the API was correct, your code should be written like:

animation(rotationKeyframes) {
  duration = 5.s
  timingFunction = AnimationTimingFunction.Linear
}

(unless, as I said before, if I'm missing something)

and in the short hand you can write it as shown here https://developer.mozilla.org/en-US/docs/Web/CSS/animation#syntax

/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;

but the

CSSAnimation

API targets a single animation as it is currently written

But I don't think it even should

I think it makes sense to have one class for specifying one of everything (no lists), and then

animation

can take a

vararg

of that thing

@Oleksandr Karpovich [JB] FYI since you may be looking at animation code based on the fact you were assigned Ian's bug 🙂

@Oleksandr Karpovich [JB] I ended up creating my own fork of the CSSAnimation class in Kobweb (my library that sits on top of C4W): https://github.com/varabyte/kobweb/blob/main/frontend/web-compose-ext/src/jsMain/kotlin/com/varabyte/kobweb/compose/css/Animation.kt Parameters are now single values instead of lists, and I introduced a value class for

AnimationIterationCount

, so I could write

iterationCount = AnimationIterationCount.Infinite

instead of passing in null. JB can feel free to reference my version if they ever revisit their own.