David Herman
01/19/2023, 1:53 AM@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
animation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
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.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> ]
CSSAnimation(
val keyframesNames: List<String>,
val duration: List<CSSSizeValue<CSSTimeUnit>>,
...
)
or better, this:
CSSAnimation(
val keyframesName: String,
val duration: CSSSizeValue<CSSTimeUnit>,
ian.shaun.thomas
01/19/2023, 2:05 AMDavid Herman
01/19/2023, 2:06 AManimation(rotationKeyframes) {
duration(5.s, 7.s) // <---- Two durations?!
timingFunction(AnimationTimingFunction.Linear)
}
animation(rotationKeyframes) {
duration = 5.s
timingFunction = AnimationTimingFunction.Linear
}
(unless, as I said before, if I'm missing something)ian.shaun.thomas
01/19/2023, 2:12 AM/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
David Herman
01/19/2023, 2:13 AMCSSAnimation
API targets a single animation as it is currently writtenian.shaun.thomas
01/19/2023, 2:16 AMDavid Herman
01/19/2023, 2:16 AManimation
can take a vararg
of that thingAnimationIterationCount
, 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.