Css.Transitions

Define CSS transitions.

import Css exposing (..)
import Css.Transitions exposing (easeInOut, transition)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)


{-| In this case we are specifying a transition such that:


  - When the backgroundColor changes will interpolate between the current value and
    the new value over 1000 milliseconds with no delay and a default (ease) easing function
  - When the transform changes will interpolate between the current value and the
    new value over 500 milliseconds with no delay and an easeInOut easing function


We are then using the `hover` function to specify that the backgroundColor and transform change on hover


-}
primaryButton =
    styled button
        [ backgroundColor (rgb 241 241 241)
        , transform (scaleX 1)
        , hover
            [ backgroundColor (rgb 220 220 220)
            , transform (scaleX 1.2)
            ]
        , transition
            [ Css.Transitions.backgroundColor 1000
            , Css.Transitions.transform3 500 0 easeInOut
            ]
        ]

Transition

type Transition

This describes all of the aspects of a CSS transition, which will then be compiled down to a string and added as a style property on elements

animation: Which property to animate
duration: The total time that the animation should take from start to end
delay: Delay before the animation starts
timing: CSS timing function which dictates how the animation speed varies over time

transition : List Transition -> Style

This function is used to batch up a list of supplied transitions that have been created (using the property functions listed below) and then produce a Css.Style. This can then be used with other functions (such as Html.Styled.Attributes.css) to add the desired transitions to elements / classes as required.

Timing functions

These functions are used to specify the CSS timing function which describes how the animation speeds up or slows down over time.

ease : TimingFunction

CSS ease timing function

linear : TimingFunction

CSS linear timing function

easeIn : TimingFunction

CSS easeIn timing function

easeOut : TimingFunction

CSS easeOut timing function

easeInOut : TimingFunction

CSS easeInOut timing function

stepStart : TimingFunction

CSS stepStart timing function

stepEnd : TimingFunction

CSS stepEnd timing function

cubicBezier : Float -> Float -> Float -> Float -> TimingFunction

CSS cubicBezier timing function

Properties

These functions are used to create a transition, generally they come in three flavours, allowing you to specify:

Duration, delay and timing function
Duration and delay with default timing function (ease)
Just duration (default timing function and no delay)

An example of this would be the background3, background2 and background functions

background : Float -> Transition

Create a Transition for the background property specifying only the duration

background2 : Float -> Float -> Transition

Create a Transition for the background property specifying duration and delay

background3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the background property specifying duration, delay and timing function

backgroundColor : Float -> Transition

Create a Transition for the background-color property specifying only the duration

backgroundColor2 : Float -> Float -> Transition

Create a Transition for the background-color property specifying duration and delay

backgroundColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the background-color property specifying duration, delay and timing function

backgroundPosition : Float -> Transition

Create a Transition for the background-position property specifying only the duration

backgroundPosition2 : Float -> Float -> Transition

Create a Transition for the background-position property specifying duration and delay

backgroundPosition3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the background-position property specifying duration, delay and timing function

backgroundSize : Float -> Transition

Create a Transition for the background-size property specifying only the duration

backgroundSize2 : Float -> Float -> Transition

Create a Transition for the background-size property specifying duration and delay

backgroundSize3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the background-size property specifying duration, delay and timing function

border : Float -> Transition

Create a Transition for the border property specifying only the duration

border2 : Float -> Float -> Transition

Create a Transition for the border property specifying duration and delay

border3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border property specifying duration, delay and timing function

borderBottom : Float -> Transition

Create a Transition for the border-bottom property specifying only the duration

borderBottom2 : Float -> Float -> Transition

Create a Transition for the border-bottom property specifying duration and delay

borderBottom3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-bottom property specifying duration, delay and timing function

borderBottomColor : Float -> Transition

Create a Transition for the border-bottom-color property specifying only the duration

borderBottomColor2 : Float -> Float -> Transition

Create a Transition for the border-bottom-color property specifying duration and delay

borderBottomColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-bottom-color property specifying duration, delay and timing function

borderBottomLeftRadius : Float -> Transition

Create a Transition for the border-bottom-left-radius property specifying only the duration

borderBottomLeftRadius2 : Float -> Float -> Transition

Create a Transition for the border-bottom-left-radius property specifying duration and delay

borderBottomLeftRadius3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-bottom-left-radius property specifying duration, delay and timing function

borderBottomRightRadius : Float -> Transition

Create a Transition for the border-bottom-right-radius property specifying only the duration

borderBottomRightRadius2 : Float -> Float -> Transition

Create a Transition for the border-bottom-right-radius property specifying duration and delay

borderBottomRightRadius3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-bottom-right-radius property specifying duration, delay and timing function

borderBottomWidth : Float -> Transition

Create a Transition for the border-bottom-width property specifying only the duration

borderBottomWidth2 : Float -> Float -> Transition

Create a Transition for the border-bottom-width property specifying duration and delay

borderBottomWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-bottom-width property specifying duration, delay and timing function

borderColor : Float -> Transition

Create a Transition for the border-color property specifying only the duration

borderColor2 : Float -> Float -> Transition

Create a Transition for the border-color property specifying duration and delay

borderColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-color property specifying duration, delay and timing function

borderLeft : Float -> Transition

Create a Transition for the border-left property specifying only the duration

borderLeft2 : Float -> Float -> Transition

Create a Transition for the border-left property specifying duration and delay

borderLeft3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-left property specifying duration, delay and timing function

borderLeftColor : Float -> Transition

Create a Transition for the border-left-color property specifying only the duration

borderLeftColor2 : Float -> Float -> Transition

Create a Transition for the border-left-color property specifying duration and delay

borderLeftColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-left-color property specifying duration, delay and timing function

borderLeftWidth : Float -> Transition

Create a Transition for the border-left-width property specifying only the duration

borderLeftWidth2 : Float -> Float -> Transition

Create a Transition for the border-left-width property specifying duration and delay

borderLeftWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-left-width property specifying duration, delay and timing function

borderRadius : Float -> Transition

Create a Transition for the border-radius property specifying only the duration

borderRadius2 : Float -> Float -> Transition

Create a Transition for the border-radius property specifying duration and delay

borderRadius3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-radius property specifying duration, delay and timing function

borderRight : Float -> Transition

Create a Transition for the border-right property specifying only the duration

borderRight2 : Float -> Float -> Transition

Create a Transition for the border-right property specifying duration and delay

borderRight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-right property specifying duration, delay and timing function

borderRightColor : Float -> Transition

Create a Transition for the border-right-color property specifying only the duration

borderRightColor2 : Float -> Float -> Transition

Create a Transition for the border-right-color property specifying duration and delay

borderRightColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-right-color property specifying duration, delay and timing function

borderRightWidth : Float -> Transition

Create a Transition for the border-right-width property specifying only the duration

borderRightWidth2 : Float -> Float -> Transition

Create a Transition for the border-right-width property specifying duration and delay

borderRightWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-right-width property specifying duration, delay and timing function

borderTop : Float -> Transition

Create a Transition for the border-top property specifying only the duration

borderTop2 : Float -> Float -> Transition

Create a Transition for the border-top property specifying duration and delay

borderTop3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-top property specifying duration, delay and timing function

borderTopColor : Float -> Transition

Create a Transition for the border-top-color property specifying only the duration

borderTopColor2 : Float -> Float -> Transition

Create a Transition for the border-top-color property specifying duration and delay

borderTopColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-top-color property specifying duration, delay and timing function

borderTopLeftRadius : Float -> Transition

Create a Transition for the border-top-left-radius property specifying only the duration

borderTopLeftRadius2 : Float -> Float -> Transition

Create a Transition for the border-top-left-radius property specifying duration and delay

borderTopLeftRadius3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-top-left-radius property specifying duration, delay and timing function

borderTopRightRadius : Float -> Transition

Create a Transition for the border-top-right-radius property specifying only the duration

borderTopRightRadius2 : Float -> Float -> Transition

Create a Transition for the border-top-right-radius property specifying duration and delay

borderTopRightRadius3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-top-right-radius property specifying duration, delay and timing function

borderTopWidth : Float -> Transition

Create a Transition for the border-top-width property specifying only the duration

borderTopWidth2 : Float -> Float -> Transition

Create a Transition for the border-top-width property specifying duration and delay

borderTopWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-top-width property specifying duration, delay and timing function

borderWidth : Float -> Transition

Create a Transition for the border-width property specifying only the duration

borderWidth2 : Float -> Float -> Transition

Create a Transition for the border-width property specifying duration and delay

borderWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the border-width property specifying duration, delay and timing function

bottom : Float -> Transition

Create a Transition for the bottom property specifying only the duration

bottom2 : Float -> Float -> Transition

Create a Transition for the bottom property specifying duration and delay

bottom3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the bottom property specifying duration, delay and timing function

boxShadow : Float -> Transition

Create a Transition for the box-shadow property specifying only the duration

boxShadow2 : Float -> Float -> Transition

Create a Transition for the box-shadow property specifying duration and delay

boxShadow3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the box-shadow property specifying duration, delay and timing function

caretColor : Float -> Transition

Create a Transition for the caret-color property specifying only the duration

caretColor2 : Float -> Float -> Transition

Create a Transition for the caret-color property specifying duration and delay

caretColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the caret-color property specifying duration, delay and timing function

clip : Float -> Transition

Create a Transition for the clip property specifying only the duration

clip2 : Float -> Float -> Transition

Create a Transition for the clip property specifying duration and delay

clip3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the clip property specifying duration, delay and timing function

clipPath : Float -> Transition

Create a Transition for the clip-path property specifying only the duration

clipPath2 : Float -> Float -> Transition

Create a Transition for the clip-path property specifying duration and delay

clipPath3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the clip-path property specifying duration, delay and timing function

color : Float -> Transition

Create a Transition for the color property specifying only the duration

color2 : Float -> Float -> Transition

Create a Transition for the color property specifying duration and delay

color3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the color property specifying duration, delay and timing function

columnCount : Float -> Transition

Create a Transition for the column-count property specifying only the duration

columnCount2 : Float -> Float -> Transition

Create a Transition for the column-count property specifying duration and delay

columnCount3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the column-count property specifying duration, delay and timing function

columnGap : Float -> Transition

Create a Transition for the column-gap property specifying only the duration

columnGap2 : Float -> Float -> Transition

Create a Transition for the column-gap property specifying duration and delay

columnGap3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the column-gap property specifying duration, delay and timing function

columnRule : Float -> Transition

Create a Transition for the column-rule property specifying only the duration

columnRule2 : Float -> Float -> Transition

Create a Transition for the column-rule property specifying duration and delay

columnRule3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the column-rule property specifying duration, delay and timing function

columnRuleColor : Float -> Transition

Create a Transition for the column-rule-color property specifying only the duration

columnRuleColor2 : Float -> Float -> Transition

Create a Transition for the column-rule-color property specifying duration and delay

columnRuleColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the column-rule-color property specifying duration, delay and timing function

columnRuleWidth : Float -> Transition

Create a Transition for the column-rule-width property specifying only the duration

columnRuleWidth2 : Float -> Float -> Transition

Create a Transition for the column-rule-width property specifying duration and delay

columnRuleWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the column-rule-width property specifying duration, delay and timing function

columnWidth : Float -> Transition

Create a Transition for the column-width property specifying only the duration

columnWidth2 : Float -> Float -> Transition

Create a Transition for the column-width property specifying duration and delay

columnWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the column-width property specifying duration, delay and timing function

columns : Float -> Transition

Create a Transition for the columns property specifying only the duration

columns2 : Float -> Float -> Transition

Create a Transition for the columns property specifying duration and delay

columns3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the columns property specifying duration, delay and timing function

filter : Float -> Transition

Create a Transition for the filter property specifying only the duration

filter2 : Float -> Float -> Transition

Create a Transition for the filter property specifying duration and delay

filter3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the filter property specifying duration, delay and timing function

flex : Float -> Transition

Create a Transition for the flex property specifying only the duration

flex2 : Float -> Float -> Transition

Create a Transition for the flex property specifying duration and delay

flex3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the flex property specifying duration, delay and timing function

flexBasis : Float -> Transition

Create a Transition for the flex-basis property specifying only the duration

flexBasis2 : Float -> Float -> Transition

Create a Transition for the flex-basis property specifying duration and delay

flexBasis3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the flex-basis property specifying duration, delay and timing function

flexGrow : Float -> Transition

Create a Transition for the flex-grow property specifying only the duration

flexGrow2 : Float -> Float -> Transition

Create a Transition for the flex-grow property specifying duration and delay

flexGrow3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the flex-grow property specifying duration, delay and timing function

flexShrink : Float -> Transition

Create a Transition for the flex-shrink property specifying only the duration

flexShrink2 : Float -> Float -> Transition

Create a Transition for the flex-shrink property specifying duration and delay

flexShrink3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the flex-shrink property specifying duration, delay and timing function

font : Float -> Transition

Create a Transition for the font property specifying only the duration

font2 : Float -> Float -> Transition

Create a Transition for the font property specifying duration and delay

font3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the font property specifying duration, delay and timing function

fontSize : Float -> Transition

Create a Transition for the font-size property specifying only the duration

fontSize2 : Float -> Float -> Transition

Create a Transition for the font-size property specifying duration and delay

fontSize3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the font-size property specifying duration, delay and timing function

fontSizeAdjust : Float -> Transition

Create a Transition for the font-size-adjust property specifying only the duration

fontSizeAdjust2 : Float -> Float -> Transition

Create a Transition for the font-size-adjust property specifying duration and delay

fontSizeAdjust3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the font-size-adjust property specifying duration, delay and timing function

fontStretch : Float -> Transition

Create a Transition for the font-size-stretch property specifying only the duration

fontStretch2 : Float -> Float -> Transition

Create a Transition for the font-stretch property specifying duration and delay

fontStretch3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the font-stretch property specifying duration, delay and timing function

fontVariationSettings : Float -> Transition

Create a Transition for the font-variation-settings property specifying only the duration

fontVariationSettings2 : Float -> Float -> Transition

Create a Transition for the font-variation-settings property specifying duration and delay

fontVariationSettings3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the font-variation-settings property specifying duration, delay and timing function

fontWeight : Float -> Transition

Create a Transition for the font-weight property specifying only the duration

fontWeight2 : Float -> Float -> Transition

Create a Transition for the font-weight property specifying duration and delay

fontWeight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the font-weight property specifying duration, delay and timing function

gridColumnGap : Float -> Transition

Create a Transition for the grid-column-gap property specifying only the duration

gridColumnGap2 : Float -> Float -> Transition

Create a Transition for the grid-column-gap property specifying duration and delay

gridColumnGap3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the grid-column-gap property specifying duration, delay and timing function

gridGap : Float -> Transition

Create a Transition for the grid-gap property specifying only the duration

gridGap2 : Float -> Float -> Transition

Create a Transition for the grid-gap property specifying duration and delay

gridGap3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the grid-gap property specifying duration, delay and timing function

gridRowGap : Float -> Transition

Create a Transition for the grid-row-gap property specifying only the duration

gridRowGap2 : Float -> Float -> Transition

Create a Transition for the grid-row-gap property specifying duration and delay

gridRowGap3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the grid-row-gap property specifying duration, delay and timing function

height : Float -> Transition

Create a Transition for the height property specifying only the duration

height2 : Float -> Float -> Transition

Create a Transition for the height property specifying duration and delay

height3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the height property specifying duration, delay and timing function

left : Float -> Transition

Create a Transition for the left property specifying only the duration

left2 : Float -> Float -> Transition

Create a Transition for the left property specifying duration and delay

left3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the left property specifying duration, delay and timing function

letterSpacing : Float -> Transition

Create a Transition for the letter-spacing property specifying only the duration

letterSpacing2 : Float -> Float -> Transition

Create a Transition for the letter-spacing property specifying duration and delay

letterSpacing3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the letter-spacing property specifying duration, delay and timing function

lineHeight : Float -> Transition

Create a Transition for the line-height property specifying only the duration

lineHeight2 : Float -> Float -> Transition

Create a Transition for the line-height property specifying duration and delay

lineHeight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the line-height property specifying duration, delay and timing function

margin : Float -> Transition

Create a Transition for the margin property specifying only the duration

margin2 : Float -> Float -> Transition

Create a Transition for the margin property specifying duration and delay

margin3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the margin property specifying duration, delay and timing function

marginBottom : Float -> Transition

Create a Transition for the margin-bottom property specifying only the duration

marginBottom2 : Float -> Float -> Transition

Create a Transition for the margin-bottom property specifying duration and delay

marginBottom3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the margin-bottom property specifying duration, delay and timing function

marginLeft : Float -> Transition

Create a Transition for the margin-left property specifying only the duration

marginLeft2 : Float -> Float -> Transition

Create a Transition for the margin-left property specifying duration and delay

marginLeft3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the margin-left property specifying duration, delay and timing function

marginRight : Float -> Transition

Create a Transition for the margin-right property specifying only the duration

marginRight2 : Float -> Float -> Transition

Create a Transition for the margin-right property specifying duration and delay

marginRight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the margin-right property specifying duration, delay and timing function

marginTop : Float -> Transition

Create a Transition for the margin-top property specifying only the duration

marginTop2 : Float -> Float -> Transition

Create a Transition for the margin-top property specifying duration and delay

marginTop3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the margin-top property specifying duration, delay and timing function

mask : Float -> Transition

Create a Transition for the mask property specifying only the duration

mask2 : Float -> Float -> Transition

Create a Transition for the mask property specifying duration and delay

mask3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the mask property specifying duration, delay and timing function

maskPosition : Float -> Transition

Create a Transition for the mask-position property specifying only the duration

maskPosition2 : Float -> Float -> Transition

Create a Transition for the mask-position property specifying duration and delay

maskPosition3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the mask-position property specifying duration, delay and timing function

maskSize : Float -> Transition

Create a Transition for the mask-size property specifying only the duration

maskSize2 : Float -> Float -> Transition

Create a Transition for the mask-size property specifying duration and delay

maskSize3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the mask-size property specifying duration, delay and timing function

maxHeight : Float -> Transition

Create a Transition for the max-height property specifying only the duration

maxHeight2 : Float -> Float -> Transition

Create a Transition for the max-height property specifying duration and delay

maxHeight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the max-height property specifying duration, delay and timing function

maxWidth : Float -> Transition

Create a Transition for the max-width property specifying only the duration

maxWidth2 : Float -> Float -> Transition

Create a Transition for the max-width property specifying duration and delay

maxWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the max-width property specifying duration, delay and timing function

minHeight : Float -> Transition

Create a Transition for the min-height property specifying only the duration

minHeight2 : Float -> Float -> Transition

Create a Transition for the min-height property specifying duration and delay

minHeight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the min-height property specifying duration, delay and timing function

minWidth : Float -> Transition

Create a Transition for the min-width property specifying only the duration

minWidth2 : Float -> Float -> Transition

Create a Transition for the min-width property specifying duration and delay

minWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the min-width property specifying duration, delay and timing function

objectPosition : Float -> Transition

Create a Transition for the object-position property specifying only the duration

objectPosition2 : Float -> Float -> Transition

Create a Transition for the object-position property specifying duration and delay

objectPosition3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the object-position property specifying duration, delay and timing function

offset : Float -> Transition

Create a Transition for the offset property specifying only the duration

offset2 : Float -> Float -> Transition

Create a Transition for the offset property specifying duration and delay

offset3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the offset property specifying duration, delay and timing function

offsetAnchor : Float -> Transition

Create a Transition for the offset-anchor property specifying only the duration

offsetAnchor2 : Float -> Float -> Transition

Create a Transition for the offset-anchor property specifying duration and delay

offsetAnchor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the offset-anchor property specifying duration, delay and timing function

offsetDistance : Float -> Transition

Create a Transition for the offset-distance property specifying only the duration

offsetDistance2 : Float -> Float -> Transition

Create a Transition for the offset-distance property specifying duration and delay

offsetDistance3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the offset-distance property specifying duration, delay and timing function

offsetPath : Float -> Transition

Create a Transition for the offset-path property specifying only the duration

offsetPath2 : Float -> Float -> Transition

Create a Transition for the offset-path property specifying duration and delay

offsetPath3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the offset-path property specifying duration, delay and timing function

offsetRotate : Float -> Transition

Create a Transition for the offset-rotate property specifying only the duration

offsetRotate2 : Float -> Float -> Transition

Create a Transition for the offset-rotate property specifying duration and delay

offsetRotate3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the offset-rotate property specifying duration, delay and timing function

opacity : Float -> Transition

Create a Transition for the opacity property specifying only the duration

opacity2 : Float -> Float -> Transition

Create a Transition for the opacity property specifying duration and delay

opacity3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the opacity property specifying duration, delay and timing function

order : Float -> Transition

Create a Transition for the order property specifying only the duration

order2 : Float -> Float -> Transition

Create a Transition for the order property specifying duration and delay

order3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the order property specifying duration, delay and timing function

outline : Float -> Transition

Create a Transition for the outline property specifying only the duration

outline2 : Float -> Float -> Transition

Create a Transition for the outline property specifying duration and delay

outline3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the outline property specifying duration, delay and timing function

outlineColor : Float -> Transition

Create a Transition for the outline-color property specifying only the duration

outlineColor2 : Float -> Float -> Transition

Create a Transition for the outline-color property specifying duration and delay

outlineColor3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the outline-color property specifying duration, delay and timing function

outlineOffset : Float -> Transition

Create a Transition for the outline-offset property specifying only the duration

outlineOffset2 : Float -> Float -> Transition

Create a Transition for the outline-offset property specifying duration and delay

outlineOffset3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the outline-offset property specifying duration, delay and timing function

outlineWidth : Float -> Transition

Create a Transition for the outline-width property specifying only the duration

outlineWidth2 : Float -> Float -> Transition

Create a Transition for the outline-width property specifying duration and delay

outlineWidth3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the outline-width property specifying duration, delay and timing function

padding : Float -> Transition

Create a Transition for the padding property specifying only the duration

padding2 : Float -> Float -> Transition

Create a Transition for the padding property specifying duration and delay

padding3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the padding property specifying duration, delay and timing function

paddingBottom : Float -> Transition

Create a Transition for the padding-bottom property specifying only the duration

paddingBottom2 : Float -> Float -> Transition

Create a Transition for the padding-bottom property specifying duration and delay

paddingBottom3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the padding-bottom property specifying duration, delay and timing function

paddingLeft : Float -> Transition

Create a Transition for the padding-left property specifying only the duration

paddingLeft2 : Float -> Float -> Transition

Create a Transition for the padding-left property specifying duration and delay

paddingLeft3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the padding-left property specifying duration, delay and timing function

paddingRight : Float -> Transition

Create a Transition for the padding-right property specifying only the duration

paddingRight2 : Float -> Float -> Transition

Create a Transition for the padding-right property specifying duration and delay

paddingRight3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the padding-right property specifying duration, delay and timing function

paddingTop : Float -> Transition

Create a Transition for the padding-top property specifying only the duration

paddingTop2 : Float -> Float -> Transition

Create a Transition for the padding-top property specifying duration and delay

paddingTop3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the padding-top property specifying duration, delay and timing function

right : Float -> Transition

Create a Transition for the right property specifying only the duration

right2 : Float -> Float -> Transition

Create a Transition for the right property specifying duration and delay

right3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the padding-right property specifying duration, delay and timing function

tabSize : Float -> Transition

Create a Transition for the tab-size property specifying only the duration

tabSize2 : Float -> Float -> Transition

Create a Transition for the tab-size property specifying duration and delay

tabSize3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the tab-size property specifying duration, delay and timing function

textIndent : Float -> Transition

Create a Transition for the text-indent property specifying only the duration

textIndent2 : Float -> Float -> Transition

Create a Transition for the text-indent property specifying duration and delay

textIndent3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the text-indent property specifying duration, delay and timing function

textShadow : Float -> Transition

Create a Transition for the text-shadow property specifying only the duration

textShadow2 : Float -> Float -> Transition

Create a Transition for the text-shadow property specifying duration and delay

textShadow3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the text-shadow property specifying duration, delay and timing function

top : Float -> Transition

Create a Transition for the top property specifying only the duration

top2 : Float -> Float -> Transition

Create a Transition for the top property specifying duration and delay

top3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the top property specifying duration, delay and timing function

transform : Float -> Transition

Create a Transition for the transform property specifying only the duration

transform2 : Float -> Float -> Transition

Create a Transition for the transform property specifying duration and delay

transform3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the transform property specifying duration, delay and timing function

transformOrigin : Float -> Transition

Create a Transition for the transform-origin property specifying only the duration

transformOrigin2 : Float -> Float -> Transition

Create a Transition for the transform-origin property specifying duration and delay

transformOrigin3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the transform-origin property specifying duration, delay and timing function

verticalAlign : Float -> Transition

Create a Transition for the vertical-align property specifying only the duration

verticalAlign2 : Float -> Float -> Transition

Create a Transition for the vertical-align property specifying duration and delay

verticalAlign3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the vertical-align property specifying duration, delay and timing function

visibility : Float -> Transition

Create a Transition for the visibility property specifying only the duration

visibility2 : Float -> Float -> Transition

Create a Transition for the visibility property specifying duration and delay

visibility3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the visibility property specifying duration, delay and timing function

width : Float -> Transition

Create a Transition for the width property specifying only the duration

width2 : Float -> Float -> Transition

Create a Transition for the width property specifying duration and delay

width3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the width property specifying duration, delay and timing function

wordSpacing : Float -> Transition

Create a Transition for the word-spacing property specifying only the duration

wordSpacing2 : Float -> Float -> Transition

Create a Transition for the word-spacing property specifying duration and delay

wordSpacing3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the word-spacing property specifying duration, delay and timing function

zIndex : Float -> Transition

Create a Transition for the z-index property specifying only the duration

zIndex2 : Float -> Float -> Transition

Create a Transition for the z-index property specifying duration and delay

zIndex3 : Float -> Float -> TimingFunction -> Transition

Create a Transition for the z-index property specifying duration, delay and timing function

proda-ai/elm-css/1.0.1

Css.Transitions

Transition

Timing functions

Properties

Modules

Styling

Elements