Syntax

Description: shorthand is defined as abbreviated option notation.

ctr('<#selector>', {
transition: {
<property:A>: <...>
<property:B>: <...>
shorthand: {
<property:A>: '<duration:A>' '<delay:A>' '<ease:A>'
<property:B>: '<duration:B>' '<delay:B>' '<ease:B>'
}
}
})
<#selector>:
transition:
<property:A>: <...>
<property:B>: <...>
shorthand:
<property:A>: [<duration:A>, <delay:A>, <ease:A>]
<property:B>: [<duration:B>, <delay:B>, <ease:B>]
<#selector> {
<property:A>: <...>;
<property:B>: <...>;
transition-duration: <duration:A>, <duration:B>;
transition-delay: <delay:A>, <delay:B>;
transition-timing-function: <ease:A>, <ease:A>;
transition-property: <property:A>, <property:B>;
}

Notes

Basic

Description: A shorthand Object in a transition Object alters property-specific transition values through a target property key whose List value corresponds to specific option values.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
shorthand: {
opacity: 1s 10s 'ease-out'
}
}
})
.test:
width: 200px
transition:
opacity: 1
shorthand:
opacity: [1s, 10s, ease-out]
.test {
opacity: 1;
width: 200px;
transition-delay: 10s;
transition-duration: 1s;
transition-property: opacity;
transition-timing-function: ease-out;
}
ctr('.test', {
  width: 200px
  transition: {
    opacity: 1
    shorthand: {
      opacity: 1s 10s 'ease-out'
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  transition-delay: 10s;
  transition-duration: 1s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}
.test:
  width: 200px
  transition:
    opacity: 1
    shorthand:
      opacity: [1s, 10s, ease-out]

Notes

Multiple

Description: Multiple target properties can be defined in the shorthand Object regardless of whether the property exists in the immediate scope.

Edit
ctr('.test', {
width: 200px
transition: {
height: 400px
opacity: 1
shorthand: {
height: 1s
opacity: 0.5s 0.25s 'ease-out'
// This property is fictional,
// the point is the sky is the limit
oldOverholt: 100s 100s 'truckin'
}
}
})
.test:
width: 200px
transition:
height: 400px
opacity: 1
shorthand:
height: 1s
opacity: [0.5s, 0.25s, ease-out]
# This property is fictional,
# the point is the sky is the limit
oldOverholt: [100s, 100s, truckin]
.test {
opacity: 1;
width: 200px;
height: 400px;
transition-delay: 0s, 0.25s, 100s;
transition-duration: 1s, 0.5s, 100s;
transition-property: height, opacity, oldOverholt;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), ease-out, truckin;
}
ctr('.test', {
  width: 200px
  transition: {
    height: 400px
    opacity: 1
    shorthand: {
      height: 1s
      opacity: 0.5s 0.25s 'ease-out'
      // This property is fictional,
      // the point is the sky is the limit
      oldOverholt: 100s 100s 'truckin'
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  height: 400px;
  transition-delay: 0s, 0.25s, 100s;
  transition-duration: 1s, 0.5s, 100s;
  transition-property: height, opacity, oldOverholt;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), ease-out, truckin;
}
.test:
  width: 200px
  transition:
    height: 400px
    opacity: 1
    shorthand:
      height: 1s
      opacity: [0.5s, 0.25s, ease-out]
      # This property is fictional,
      # the point is the sky is the limit
      oldOverholt: [100s, 100s, truckin]

With Option

Description: The shorthand Object inherits values from the option Object.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
ease: 'ease-out'
shorthand: {
background: 1s 10s ease-in
color: 2s
}
}
color: red
background: green
}
})
.test:
width: 200px
transition:
option:
ease: ease-out
shorthand:
background: [1s, 10s, ease-in]
color: 2s
color: red
background: green
.test {
color: #f00;
width: 200px;
background: #008000;
transition-delay: 10s, 0s;
transition-duration: 1s, 2s;
transition-property: background, color;
transition-timing-function: ease-in, ease-out;
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      ease: 'ease-out'
      shorthand: {
        background: 1s 10s ease-in
        color: 2s
      }
    }
    color: red
    background: green
  }
})
.test {
  color: #f00;
  width: 200px;
  background: #008000;
  transition-delay: 10s, 0s;
  transition-duration: 1s, 2s;
  transition-property: background, color;
  transition-timing-function: ease-in, ease-out;
}
.test:
  width: 200px
  transition:
    option:
      ease: ease-out
      shorthand:
        background: [1s, 10s, ease-in]
        color: 2s
    color: red
    background: green

Notes

Default Keyword

Description: The default keyword can be used as a shorthand List value to inherit the default option value.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
delay: 4s
duration: 20s
ease: 'ease-in'
shorthand: {
background: 2s default default
color: default 1s 'ease-out'
opacity: 10s 5s default
}
}
opacity: 1
color: red
background: black
}
})
.test:
width: 200px
transition:
option:
delay: 4s
duration: 20s
ease: ease-in
shorthand:
background: [2s, default, default]
color: [default, 1s, ease-out]
opacity: [10s, 5s, default]
opacity: 1
color: red
background: black
.test {
opacity: 1;
color: #f00;
width: 200px;
background: #000;
transition-delay: 4s, 1s, 5s;
transition-duration: 2s, 20s, 10s;
transition-property: background, color, opacity;
transition-timing-function: ease-in, ease-out, ease-in;
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      delay: 4s
      duration: 20s
      ease: 'ease-in'
      shorthand: {
        background: 2s default default
        color: default 1s 'ease-out'
        opacity: 10s 5s default
      }
    }
    opacity: 1
    color: red
    background: black
  }
})
.test {
  opacity: 1;
  color: #f00;
  width: 200px;
  background: #000;
  transition-delay: 4s, 1s, 5s;
  transition-duration: 2s, 20s, 10s;
  transition-property: background, color, opacity;
  transition-timing-function: ease-in, ease-out, ease-in;
}
.test:
  width: 200px
  transition:
    option:
      delay: 4s
      duration: 20s
      ease: ease-in
      shorthand:
        background: [2s, default, default]
        color: [default, 1s, ease-out]
        opacity: [10s, 5s, default]
    opacity: 1
    color: red
    background: black

Notes

Omit

Description: If a shortand target property value is false, the property is omitted from the transition properties.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
color: blue
background: red
shorthand: {
opacity: 2s
// omitted
background: false
}
}
})
.test:
width: 200px
transition:
opacity: 1
color: blue
background: red
shorthand:
opacity: 2s
# omitted
background: false
.test {
opacity: 1;
color: #00f;
width: 200px;
background: #f00;
transition-delay: 0s, 0s;
transition-duration: 2s, 0.5s;
transition-property: opacity, color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    opacity: 1
    color: blue
    background: red
    shorthand: {
      opacity: 2s
      // omitted
      background: false
    }
  }
})
.test {
  opacity: 1;
  color: #00f;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 2s, 0.5s;
  transition-property: opacity, color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    opacity: 1
    color: blue
    background: red
    shorthand:
      opacity: 2s
      # omitted
      background: false

Notes

Empty

Description: A shorthand Object can be used to generate transition properties without raw CSS properties.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
ease: 'ease-in'
}
shorthand: {
background: 1s
opacity: 0.5s 0.25s 'ease-out'
}
}
})
.test:
width: 200px
transition:
option:
ease: ease-in
shorthand:
background: 1s
opacity: [0.5s, 0.25s, ease-out]
.test {
width: 200px;
transition-delay: 0s, 0.25s;
transition-duration: 1s, 0.5s;
transition-property: background, opacity;
transition-timing-function: ease-in, ease-out;
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      ease: 'ease-in'
    }
    shorthand: {
      background: 1s
      opacity: 0.5s 0.25s 'ease-out'
    }
  }
})
.test {
  width: 200px;
  transition-delay: 0s, 0.25s;
  transition-duration: 1s, 0.5s;
  transition-property: background, opacity;
  transition-timing-function: ease-in, ease-out;
}
.test:
  width: 200px
  transition:
    option:
      ease: ease-in
    shorthand:
      background: 1s
      opacity: [0.5s, 0.25s, ease-out]