Css.Internal.AnimationProperty
Many of these share a name and similar type with Style
equivalents in the Css
module, but they are different in that unlike Style
s, 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
.
{ compatible | keyframes : Css.Structure.Compatible
, none : Css.Structure.Compatible
, value : String
}
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 Style
s, 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.