decioferreira / elm-zen-css / CSS.Properties.Animation.TimingFunction

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

Single animation

linear : CSS.Internal.Property

Equal to cubic-bezier(0.0, 0.0, 1.0, 1.0), animates at an even speed.

ease : CSS.Internal.Property

Equal to cubic-bezier(0.25, 0.1, 0.25, 1.0), the default value, increases in velocity towards the middle of the animation, slowing back down at the end.

easeIn : CSS.Internal.Property

Equal to cubic-bezier(0.42, 0, 1.0, 1.0), starts off slowly, with the speed of the transition of the animating property increasing until complete.

easeOut : CSS.Internal.Property

Equal to cubic-bezier(0, 0, 0.58, 1.0), starts quickly, slowing down the animation continues.

easeInOut : CSS.Internal.Property

Equal to cubic-bezier(0, 0, 0.58, 1.0), starts quickly, slowing down the animation continues.

cubicBezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> CSS.Internal.Property

Equal to cubic-bezier(0, 0, 0.58, 1.0), starts quickly, slowing down the animation continues.

stepStart : CSS.Internal.Property

Equal to steps(1, jump-start).

stepEnd : CSS.Internal.Property

Equal to steps(1, jump-end).

steps : Basics.Int -> Maybe StepPosition -> CSS.Internal.Property

Equal to steps(1, jump-end).

Multiple animations

multiple : List.Nonempty.Nonempty EasingFunction -> CSS.Internal.Property

Global values

inherit : CSS.Internal.Property

The inherit CSS keyword causes the element to take the computed value of the property from its parent element.

Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/inherit

initial : CSS.Internal.Property

The initial CSS keyword applies the initial (or default) value of a property to an element.

Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/initial

revert : CSS.Internal.Property

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.

Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

revertLayer : CSS.Internal.Property

The revert-layer CSS keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer.

Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer

unset : CSS.Internal.Property

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/unset

Types


type EasingFunction
    = Linear
    | Ease
    | EaseIn
    | EaseOut
    | EaseInOut
    | CubicBezier Basics.Float Basics.Float Basics.Float Basics.Float
    | StepStart
    | StepEnd
    | Steps Basics.Int (Maybe StepPosition)


type StepPosition
    = JumpStart
    | JumpEnd
    | JumpNone
    | JumpBoth
    | Start
    | End

easingFunctionToString : EasingFunction -> String