David Herman
01/19/2023, 1:53 AMDavid Herman
01/19/2023, 1:56 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
David Herman
01/19/2023, 1:57 AManimation-name: fadeInOut, moveLeft300px, bounce;
animation-duration: 2.5s, 5s, 1s;
animation-iteration-count: 2, 1, 5;
David Herman
01/19/2023, 1:57 AMDavid Herman
01/19/2023, 2:00 AMdata 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
01/19/2023, 2:03 AManimation =
<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
01/19/2023, 2:03 AMCSSAnimation(
val keyframesNames: List<String>,
val duration: List<CSSSizeValue<CSSTimeUnit>>,
...
)
or better, this:
CSSAnimation(
val keyframesName: String,
val duration: CSSSizeValue<CSSTimeUnit>,
David Herman
01/19/2023, 2:04 AMian.shaun.thomas
01/19/2023, 2:05 AMian.shaun.thomas
01/19/2023, 2:06 AMDavid Herman
01/19/2023, 2:06 AMDavid Herman
01/19/2023, 2:07 AMDavid Herman
01/19/2023, 2:07 AMDavid Herman
01/19/2023, 2:10 AManimation(rotationKeyframes) {
duration(5.s, 7.s) // <---- Two durations?!
timingFunction(AnimationTimingFunction.Linear)
}
David Herman
01/19/2023, 2:11 AManimation(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 AMian.shaun.thomas
01/19/2023, 2:13 AM/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
David Herman
01/19/2023, 2:13 AMDavid Herman
01/19/2023, 2:14 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 AMDavid Herman
01/19/2023, 2:17 AMDavid Herman
01/19/2023, 2:17 AManimation
can take a vararg
of that thingDavid Herman
01/19/2023, 2:18 AMDavid Herman
01/25/2023, 12:08 AMAnimationIterationCount
, 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.