CSS animations

[Skolotsky]

Introduce css animations like this

object AppStyleSheet : StyleSheet() {
   val bounce by keyframes {
        from {
            property("transform", "translateX(50%)")
        }

        to {
            property("transform", "translateX(-50%)")
        }
    }

    val myClass by style {
        animation(bounce) {
            duration(2.s)
            timingFunction(AnimationTimingFunction.EaseIn)
            direction(AnimationDirection.Alternate)
        }
    }
}

[eymar]

I see that you usually avoid using data classes.
Is it necessary in this case?

[Skolotsky]

It is necessary due to equals check. We discussed with @Schahen that later we will think about replacing data classes with some interface which needs equals to be implemented.

[eymar]

I didn't find/see any cases when usePrefix = false.
What's the idea behind this parameter? When would one want to pass false?

[Skolotsky]

It's for the cases when user want integrate with some third party lib and it's classes.

[eymar]

There is a list of functions that modify CSSAnimation state:
duration, timingFunction, delay, etc...
Are they intentionally made as extension functions, instead of adding them in the CSSAnimation class?
Could they be in the class instead?

2nd question:
Would it be useful to make this functions return CSSAnimation instance? then this function's calls can be chained: animation.delay(...).duration(...) What do you think?

[Skolotsky]

It was intentionally because it isn't contract, just convenient way to modify structure. Ant it is very similar to how other properties added to CSS.

[Skolotsky]

You don't need chain here because it's intended to be called in

animation(keyframe) {
   delay()
   duration()
}

So it's just a way how we are doing our DSL