rtfeldman / elm-css / Css.Animations

Animations


type alias Property =
Css.Internal.AnimationProperty

An animatable property.

Many of these share a name and similar type with Style equivalents in the Css module, but they are different in that unlike Styles, animatable properties are not compatible with !important or various selectors or media queries.

If you need to use an experimental or vendor-prefixed animatable property, see custom.

keyframes : List ( Basics.Int, List Property ) -> Keyframes {}

Specify a list of ( percentage, properties) tuples to use for animation keyframes.

Pass the result to Css.animationName!

keyframes [] is equivalent to none.


type alias Keyframes compatible =
{ compatible | keyframes : Css.Structure.Compatible
, none : Css.Structure.Compatible
, value : String 
}

Animatable Properties

As MDN explains, only certain CSS properties are animatable.

Some of the animatable properties (except for experimental properties, or properties with browser prefixes) are listed here. Many of them share a name and similar type with Style equivalents in the Css module, but they are different in that unlike Styles, animatable properties [are not compatible with !important](https://developer.mozilla.org/en-US/docs/Web/CSS/

opacity : { compatible | value : String, number : Css.Structure.Compatible } -> Property

transform : List { compatible | value : String, transform : Css.Structure.Compatible } -> Property

all : { compatible | value : String, all : Css.Structure.Compatible } -> Property

backgroundSize : Css.Internal.LengthOrAutoOrCoverOrContain compatible -> Property

backgroundSize2 : Css.Internal.LengthOrAutoOrCoverOrContain compatible -> Css.Internal.LengthOrAutoOrCoverOrContain compatible -> Property

border : Css.Internal.Length compatible units -> Property

property : String -> String -> Property

Define a custom animatable property.

css [ animationName (keyframes [ ( 5, [ property "backdrop-filter" "blur(3px)" ] ) ]) ]

...outputs

@keyframes _cf0d1b {
    5% {
        backdrop-filter:blur(3px);
    }
}

...

animation-name: _cf0d1b

backgroundColor : { compatible | value : String, color : Css.Structure.Compatible } -> Property

border2 : Css.Internal.Length compatible units -> Css.Internal.Length compatible units -> Property

border3 : Css.Internal.Length compatible units -> Css.Internal.Length compatible units -> Css.Internal.Length compatible units -> Property

borderBottom : Css.Internal.Length compatible units -> Property

borderBottom2 : Css.Internal.Length compatible units -> Css.Internal.Length compatible units -> Property

borderBottom3 : Css.Internal.Length compatible units -> Css.Internal.Length compatible units -> Css.Internal.Length compatible units -> Property

custom : String -> String -> Property

Create a custom animatable property with the given name and value. You can use this to define vendor-prefixed or experimental properties.

custom "-moz-outline-radius" "25px"

WARNING: Some properties are not exposed in this module because they are not animatable! This means browsers will refuse to animate them even if you pass them to this function.

MDN has a list of the animatable properties.