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

• Notation: <target:property>: <duration> <delay> <ease>
• Hands down, one of my favorite concepts due to the fine-grain control it offers

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.

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

• Object key represents the target property
• Order of shorthand List values
  1. transition-duration
  2. transition-delay
  3. transition-timing-function
• <target:property>: <duration> <delay> <ease>
• Any property not specified in the shorthand Object inherits the default option values

Multiple¶

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

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.

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

• shorthand option values overwrite option Object values
• The synergetic relationship between shorthand and option can be extremely powerful and leveraged for maximum profit

Default Keyword¶

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

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

• default can either be a String or Literal

Omit¶

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

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

• You can also specify properties that you wish to omit through the omit option property

Empty¶

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

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]