silk-foundation/com.varabyte.kobweb.silk.style.animation/Keyframes

Keyframes

class Keyframes(init: KeyframesBuilder.() -> Unit)(source)

Define a set of keyframes that can later be referenced in animations.

For example,

val BounceKeyframes = Keyframes {
  from { Modifier.translateX((-50).percent) }
  to { Modifier.translateX((50).percent) }
}

// Later
Div(
  Modifier
    .size(100.px).backgroundColor(Colors.Red)
    .animation(BounceKeyframes.toAnimation(
      duration = 2.s,
      timingFunction = AnimationTimingFunction.EaseIn,
      direction = AnimationDirection.Alternate,
      iterationCount = AnimationIterationCount.Infinite
    ))
    .toAttrs()
)

If you are not using Kobweb, e.g. if you're using these widgets as a standalone library, you will have to manually register your keyframes:

SilkFoundationStyles(
  initSilk = { ctx ->
    /*...*/
        ctx.theme.registerKeyframes("bounce", BounceKeyframes)
      }
    )

Otherwise, the Kobweb Gradle plugin will do this for you.

Constructors

Keyframes

constructor(init: KeyframesBuilder.() -> Unit)

Types

Companion

object Companion

Properties

name

val Keyframes.name: String

Return the class name associated with the given Keyframes.

usesColorMode

val usesColorMode: Boolean

Functions

toAnimation

@Composable

fun Keyframes.toAnimation(duration: CSSTimeNumericValue? = null, timingFunction: AnimationTimingFunction? = null, delay: CSSTimeNumericValue? = null, iterationCount: AnimationIterationCount? = null, direction: AnimationDirection? = null, fillMode: AnimationFillMode? = null, playState: AnimationPlayState? = null): Animation.Repeatable

fun Keyframes.toAnimation(colorMode: ColorMode?, duration: CSSTimeNumericValue? = null, timingFunction: AnimationTimingFunction? = null, delay: CSSTimeNumericValue? = null, iterationCount: AnimationIterationCount? = null, direction: AnimationDirection? = null, fillMode: AnimationFillMode? = null, playState: AnimationPlayState? = null): Animation.Repeatable

A convenience method to convert this Keyframes instance into an object that can be passed into Modifier.animation.