Can someone who understands css animations, or the compose CSSAnimation data class, confirm that the...

# compose-web

[David Herman]

Can someone who understands css animations, or the compose CSSAnimation data class, confirm that they didn't mess up the API? (More details in 🧵 )

[David Herman]

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

[David Herman]

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;

[David Herman]

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

[David Herman]

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.

[David Herman]

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> ]

[David Herman]

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>,

[David Herman]

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

[ian.shaun.thomas]

I'm a bit confused what you're asking for. Are you asking for how to implement keyframe animations in the compose CSS or noting that it compiles the CSS improperly?

[ian.shaun.thomas]

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

[David Herman]

I updated my comment above to be clearer about what I was expecting

[David Herman]

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

[David Herman]

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

[David Herman]

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)
}

[David Herman]

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)

[ian.shaun.thomas]

I believe it would apply the specific duration to each animation set. You can see an example here of duration taking a list of durations for example https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration#syntax

[ian.shaun.thomas]

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;

[David Herman]

The examples you linked are for targeting multiple animations

[David Herman]

but the CSSAnimation API targets a single animation as it is currently written

[ian.shaun.thomas]

ah I see, it doesnt let you provide multiple keyframes

[David Herman]

Right

[David Herman]

But I don't think it even should

[David Herman]

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

[David Herman]

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

[David Herman]

@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.