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
]
]
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.
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
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