Cendrb / elm-css / 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

transition : List Transition -> Css.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 : Basics.Float -> Basics.Float -> Basics.Float -> Basics.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:

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

background : Basics.Float -> Transition

Create a Transition for the background property specifying only the duration

background2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the background property specifying duration and delay

background3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

backgroundColor : Basics.Float -> Transition

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

backgroundColor2 : Basics.Float -> Basics.Float -> Transition

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

backgroundColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

backgroundPosition : Basics.Float -> Transition

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

backgroundPosition2 : Basics.Float -> Basics.Float -> Transition

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

backgroundPosition3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

backgroundSize : Basics.Float -> Transition

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

backgroundSize2 : Basics.Float -> Basics.Float -> Transition

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

backgroundSize3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

border : Basics.Float -> Transition

Create a Transition for the border property specifying only the duration

border2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the border property specifying duration and delay

border3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderBottom : Basics.Float -> Transition

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

borderBottom2 : Basics.Float -> Basics.Float -> Transition

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

borderBottom3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderBottomColor : Basics.Float -> Transition

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

borderBottomColor2 : Basics.Float -> Basics.Float -> Transition

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

borderBottomColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderBottomLeftRadius : Basics.Float -> Transition

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

borderBottomLeftRadius2 : Basics.Float -> Basics.Float -> Transition

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

borderBottomLeftRadius3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderBottomRightRadius : Basics.Float -> Transition

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

borderBottomRightRadius2 : Basics.Float -> Basics.Float -> Transition

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

borderBottomRightRadius3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderBottomWidth : Basics.Float -> Transition

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

borderBottomWidth2 : Basics.Float -> Basics.Float -> Transition

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

borderBottomWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderColor : Basics.Float -> Transition

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

borderColor2 : Basics.Float -> Basics.Float -> Transition

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

borderColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderLeft : Basics.Float -> Transition

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

borderLeft2 : Basics.Float -> Basics.Float -> Transition

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

borderLeft3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderLeftColor : Basics.Float -> Transition

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

borderLeftColor2 : Basics.Float -> Basics.Float -> Transition

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

borderLeftColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderLeftWidth : Basics.Float -> Transition

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

borderLeftWidth2 : Basics.Float -> Basics.Float -> Transition

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

borderLeftWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderRadius : Basics.Float -> Transition

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

borderRadius2 : Basics.Float -> Basics.Float -> Transition

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

borderRadius3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderRight : Basics.Float -> Transition

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

borderRight2 : Basics.Float -> Basics.Float -> Transition

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

borderRight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderRightColor : Basics.Float -> Transition

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

borderRightColor2 : Basics.Float -> Basics.Float -> Transition

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

borderRightColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderRightWidth : Basics.Float -> Transition

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

borderRightWidth2 : Basics.Float -> Basics.Float -> Transition

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

borderRightWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderTop : Basics.Float -> Transition

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

borderTop2 : Basics.Float -> Basics.Float -> Transition

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

borderTop3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderTopColor : Basics.Float -> Transition

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

borderTopColor2 : Basics.Float -> Basics.Float -> Transition

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

borderTopColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderTopLeftRadius : Basics.Float -> Transition

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

borderTopLeftRadius2 : Basics.Float -> Basics.Float -> Transition

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

borderTopLeftRadius3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderTopRightRadius : Basics.Float -> Transition

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

borderTopRightRadius2 : Basics.Float -> Basics.Float -> Transition

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

borderTopRightRadius3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderTopWidth : Basics.Float -> Transition

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

borderTopWidth2 : Basics.Float -> Basics.Float -> Transition

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

borderTopWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

borderWidth : Basics.Float -> Transition

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

borderWidth2 : Basics.Float -> Basics.Float -> Transition

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

borderWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

bottom : Basics.Float -> Transition

Create a Transition for the bottom property specifying only the duration

bottom2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the bottom property specifying duration and delay

bottom3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

boxShadow : Basics.Float -> Transition

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

boxShadow2 : Basics.Float -> Basics.Float -> Transition

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

boxShadow3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

caretColor : Basics.Float -> Transition

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

caretColor2 : Basics.Float -> Basics.Float -> Transition

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

caretColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

clip : Basics.Float -> Transition

Create a Transition for the clip property specifying only the duration

clip2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the clip property specifying duration and delay

clip3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

clipPath : Basics.Float -> Transition

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

clipPath2 : Basics.Float -> Basics.Float -> Transition

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

clipPath3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

color : Basics.Float -> Transition

Create a Transition for the color property specifying only the duration

color2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the color property specifying duration and delay

color3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columnCount : Basics.Float -> Transition

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

columnCount2 : Basics.Float -> Basics.Float -> Transition

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

columnCount3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columnGap : Basics.Float -> Transition

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

columnGap2 : Basics.Float -> Basics.Float -> Transition

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

columnGap3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columnRule : Basics.Float -> Transition

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

columnRule2 : Basics.Float -> Basics.Float -> Transition

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

columnRule3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columnRuleColor : Basics.Float -> Transition

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

columnRuleColor2 : Basics.Float -> Basics.Float -> Transition

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

columnRuleColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columnRuleWidth : Basics.Float -> Transition

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

columnRuleWidth2 : Basics.Float -> Basics.Float -> Transition

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

columnRuleWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columnWidth : Basics.Float -> Transition

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

columnWidth2 : Basics.Float -> Basics.Float -> Transition

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

columnWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

columns : Basics.Float -> Transition

Create a Transition for the columns property specifying only the duration

columns2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the columns property specifying duration and delay

columns3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

filter : Basics.Float -> Transition

Create a Transition for the filter property specifying only the duration

filter2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the filter property specifying duration and delay

filter3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

flex : Basics.Float -> Transition

Create a Transition for the flex property specifying only the duration

flex2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the flex property specifying duration and delay

flex3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

flexBasis : Basics.Float -> Transition

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

flexBasis2 : Basics.Float -> Basics.Float -> Transition

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

flexBasis3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

flexGrow : Basics.Float -> Transition

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

flexGrow2 : Basics.Float -> Basics.Float -> Transition

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

flexGrow3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

flexShrink : Basics.Float -> Transition

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

flexShrink2 : Basics.Float -> Basics.Float -> Transition

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

flexShrink3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

font : Basics.Float -> Transition

Create a Transition for the font property specifying only the duration

font2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the font property specifying duration and delay

font3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

fontSize : Basics.Float -> Transition

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

fontSize2 : Basics.Float -> Basics.Float -> Transition

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

fontSize3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

fontSizeAdjust : Basics.Float -> Transition

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

fontSizeAdjust2 : Basics.Float -> Basics.Float -> Transition

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

fontSizeAdjust3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

fontStretch : Basics.Float -> Transition

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

fontStretch2 : Basics.Float -> Basics.Float -> Transition

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

fontStretch3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

fontVariationSettings : Basics.Float -> Transition

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

fontVariationSettings2 : Basics.Float -> Basics.Float -> Transition

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

fontVariationSettings3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

fontWeight : Basics.Float -> Transition

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

fontWeight2 : Basics.Float -> Basics.Float -> Transition

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

fontWeight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

gridColumnGap : Basics.Float -> Transition

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

gridColumnGap2 : Basics.Float -> Basics.Float -> Transition

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

gridColumnGap3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

gridGap : Basics.Float -> Transition

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

gridGap2 : Basics.Float -> Basics.Float -> Transition

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

gridGap3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

gridRowGap : Basics.Float -> Transition

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

gridRowGap2 : Basics.Float -> Basics.Float -> Transition

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

gridRowGap3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

height : Basics.Float -> Transition

Create a Transition for the height property specifying only the duration

height2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the height property specifying duration and delay

height3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

left : Basics.Float -> Transition

Create a Transition for the left property specifying only the duration

left2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the left property specifying duration and delay

left3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

letterSpacing : Basics.Float -> Transition

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

letterSpacing2 : Basics.Float -> Basics.Float -> Transition

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

letterSpacing3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

lineHeight : Basics.Float -> Transition

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

lineHeight2 : Basics.Float -> Basics.Float -> Transition

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

lineHeight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

margin : Basics.Float -> Transition

Create a Transition for the margin property specifying only the duration

margin2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the margin property specifying duration and delay

margin3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

marginBottom : Basics.Float -> Transition

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

marginBottom2 : Basics.Float -> Basics.Float -> Transition

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

marginBottom3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

marginLeft : Basics.Float -> Transition

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

marginLeft2 : Basics.Float -> Basics.Float -> Transition

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

marginLeft3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

marginRight : Basics.Float -> Transition

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

marginRight2 : Basics.Float -> Basics.Float -> Transition

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

marginRight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

marginTop : Basics.Float -> Transition

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

marginTop2 : Basics.Float -> Basics.Float -> Transition

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

marginTop3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

mask : Basics.Float -> Transition

Create a Transition for the mask property specifying only the duration

mask2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the mask property specifying duration and delay

mask3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

maskPosition : Basics.Float -> Transition

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

maskPosition2 : Basics.Float -> Basics.Float -> Transition

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

maskPosition3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

maskSize : Basics.Float -> Transition

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

maskSize2 : Basics.Float -> Basics.Float -> Transition

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

maskSize3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

maxHeight : Basics.Float -> Transition

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

maxHeight2 : Basics.Float -> Basics.Float -> Transition

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

maxHeight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

maxWidth : Basics.Float -> Transition

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

maxWidth2 : Basics.Float -> Basics.Float -> Transition

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

maxWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

minHeight : Basics.Float -> Transition

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

minHeight2 : Basics.Float -> Basics.Float -> Transition

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

minHeight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

minWidth : Basics.Float -> Transition

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

minWidth2 : Basics.Float -> Basics.Float -> Transition

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

minWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

objectPosition : Basics.Float -> Transition

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

objectPosition2 : Basics.Float -> Basics.Float -> Transition

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

objectPosition3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

offset : Basics.Float -> Transition

Create a Transition for the offset property specifying only the duration

offset2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the offset property specifying duration and delay

offset3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

offsetAnchor : Basics.Float -> Transition

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

offsetAnchor2 : Basics.Float -> Basics.Float -> Transition

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

offsetAnchor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

offsetDistance : Basics.Float -> Transition

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

offsetDistance2 : Basics.Float -> Basics.Float -> Transition

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

offsetDistance3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

offsetPath : Basics.Float -> Transition

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

offsetPath2 : Basics.Float -> Basics.Float -> Transition

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

offsetPath3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

offsetRotate : Basics.Float -> Transition

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

offsetRotate2 : Basics.Float -> Basics.Float -> Transition

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

offsetRotate3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

opacity : Basics.Float -> Transition

Create a Transition for the opacity property specifying only the duration

opacity2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the opacity property specifying duration and delay

opacity3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

order : Basics.Float -> Transition

Create a Transition for the order property specifying only the duration

order2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the order property specifying duration and delay

order3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

outline : Basics.Float -> Transition

Create a Transition for the outline property specifying only the duration

outline2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the outline property specifying duration and delay

outline3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

outlineColor : Basics.Float -> Transition

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

outlineColor2 : Basics.Float -> Basics.Float -> Transition

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

outlineColor3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

outlineOffset : Basics.Float -> Transition

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

outlineOffset2 : Basics.Float -> Basics.Float -> Transition

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

outlineOffset3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

outlineWidth : Basics.Float -> Transition

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

outlineWidth2 : Basics.Float -> Basics.Float -> Transition

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

outlineWidth3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

padding : Basics.Float -> Transition

Create a Transition for the padding property specifying only the duration

padding2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the padding property specifying duration and delay

padding3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

paddingBottom : Basics.Float -> Transition

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

paddingBottom2 : Basics.Float -> Basics.Float -> Transition

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

paddingBottom3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

paddingLeft : Basics.Float -> Transition

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

paddingLeft2 : Basics.Float -> Basics.Float -> Transition

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

paddingLeft3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

paddingRight : Basics.Float -> Transition

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

paddingRight2 : Basics.Float -> Basics.Float -> Transition

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

paddingRight3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

paddingTop : Basics.Float -> Transition

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

paddingTop2 : Basics.Float -> Basics.Float -> Transition

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

paddingTop3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

right : Basics.Float -> Transition

Create a Transition for the right property specifying only the duration

right2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the right property specifying duration and delay

right3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

tabSize : Basics.Float -> Transition

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

tabSize2 : Basics.Float -> Basics.Float -> Transition

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

tabSize3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

textIndent : Basics.Float -> Transition

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

textIndent2 : Basics.Float -> Basics.Float -> Transition

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

textIndent3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

textShadow : Basics.Float -> Transition

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

textShadow2 : Basics.Float -> Basics.Float -> Transition

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

textShadow3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

top : Basics.Float -> Transition

Create a Transition for the top property specifying only the duration

top2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the top property specifying duration and delay

top3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

transform : Basics.Float -> Transition

Create a Transition for the transform property specifying only the duration

transform2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the transform property specifying duration and delay

transform3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

transformOrigin : Basics.Float -> Transition

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

transformOrigin2 : Basics.Float -> Basics.Float -> Transition

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

transformOrigin3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

verticalAlign : Basics.Float -> Transition

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

verticalAlign2 : Basics.Float -> Basics.Float -> Transition

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

verticalAlign3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

visibility : Basics.Float -> Transition

Create a Transition for the visibility property specifying only the duration

visibility2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the visibility property specifying duration and delay

visibility3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

width : Basics.Float -> Transition

Create a Transition for the width property specifying only the duration

width2 : Basics.Float -> Basics.Float -> Transition

Create a Transition for the width property specifying duration and delay

width3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

wordSpacing : Basics.Float -> Transition

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

wordSpacing2 : Basics.Float -> Basics.Float -> Transition

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

wordSpacing3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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

zIndex : Basics.Float -> Transition

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

zIndex2 : Basics.Float -> Basics.Float -> Transition

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

zIndex3 : Basics.Float -> Basics.Float -> TimingFunction -> Transition

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