Syntax¶

Description: shorthand is defined as abbreviated option notation.


ctr('<#selector>', {
  '<state:identifier>': {
    on: {
      <property:A>: <...>
      <property:B>: <...>
      shorthand: {
        <property:A>: '<duration:A>' '<delay:A>' '<ease:A>'
        <property:B>: '<duration:B>' '<delay:B>' '<ease:B>'
      }
    }
  }
})


<#selector>:
  <state:identifier>:
    on:
      <property:A>: <...>
      <property:B>: <...>
      shorthand:
        <property:A>: [<duration:A>, <delay:A>, <ease:A>]
        <property:B>: [<duration:B>, <delay:B>, <ease:B>]


<#selector>:<identifier> {
  <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 state, on, non, common, or option Object alters property-specific transition values through a target property key whose List value corresponds to specific option values.

Edit


ctr('.test', {
  width: 200px
  hover: {
    on: {
      opacity: 1
      shorthand: {
        // property: duration delay ease
        opacity: 2s 2s 'ease-out'
      }
    }
    non: {
      opacity: 0.5
      shorthand: {
        // property: duration delay ease
        opacity: 1s 1s 'ease-in'
      }
    }
  }
})


.test:
  width: 200px
  hover:
    on:
      opacity: 1
      shorthand:
        # property: [duration, delay, ease]
        opacity: [2s, 2s, ease-out]
    non:
      opacity: 0.5
      shorthand:
        # property: [duration, delay, ease]
        opacity: [1s, 1s, ease-in]


.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 2s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}
.test:not(:hover) {
  opacity: 0.5;
  transition-delay: 1s;
  transition-duration: 1s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

ctr('.test', {
  width: 200px
  hover: {
    on: {
      opacity: 1
      shorthand: {
        // property: duration delay ease
        opacity: 2s 2s 'ease-out'
      }
    }
    non: {
      opacity: 0.5
      shorthand: {
        // property: duration delay ease
        opacity: 1s 1s 'ease-in'
      }
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 2s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-out;
}
.test:not(:hover) {
  opacity: 0.5;
  transition-delay: 1s;
  transition-duration: 1s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

.test:
  width: 200px
  hover:
    on:
      opacity: 1
      shorthand:
        # property: [duration, delay, ease]
        opacity: [2s, 2s, ease-out]
    non:
      opacity: 0.5
      shorthand:
        # property: [duration, delay, ease]
        opacity: [1s, 1s, ease-in]

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

Edit


ctr('.test', {
  width: 200px
  hover-on: {
    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
      beer: 100s 100s 'funky-bis'
    }
  }
})


.test:
  width: 200px
  hover-on:
    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
      beer: [100s, 100s, funky-bis]


.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0.25s, 100s;
  transition-duration: 1s, 0.5s, 100s;
  transition-property: height, opacity, beer;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), ease-out, funky-bis;
}

ctr('.test', {
  width: 200px
  hover-on: {
    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
      beer: 100s 100s 'funky-bis'
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0.25s, 100s;
  transition-duration: 1s, 0.5s, 100s;
  transition-property: height, opacity, beer;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), ease-out, funky-bis;
}

.test:
  width: 200px
  hover-on:
    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
      beer: [100s, 100s, funky-bis]

With Option¶

Description: The shorthand Object inherits values from the option Object

Edit


ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      ease: 'ease-out'
      shorthand: {
        height: 1s
        opacity: 0.25s 0.25s 'ease-in'
        background: 2s 2s
      }
    }
    height: 200px
    opacity: 0.5
    background: red
  }
})


.test:
  width: 200px
  hover-on:
    option:
      ease: ease-out
      shorthand:
        height: 1s
        opacity: [0.25s, 0.25s, ease-in]
        background: [2s, 2s]
    height: 200px
    opacity: 0.5
    background: red


.test {
  width: 200px;
}
.test:hover {
  opacity: 0.5;
  height: 200px;
  background: #f00;
  transition-delay: 0s, 0.25s, 2s;
  transition-duration: 1s, 0.25s, 2s;
  transition-property: height, opacity, background;
  transition-timing-function: ease-out, ease-in, ease-out;
}

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      ease: 'ease-out'
      shorthand: {
        height: 1s
        opacity: 0.25s 0.25s 'ease-in'
        background: 2s 2s
      }
    }
    height: 200px
    opacity: 0.5
    background: red
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 0.5;
  height: 200px;
  background: #f00;
  transition-delay: 0s, 0.25s, 2s;
  transition-duration: 1s, 0.25s, 2s;
  transition-property: height, opacity, background;
  transition-timing-function: ease-out, ease-in, ease-out;
}

.test:
  width: 200px
  hover-on:
    option:
      ease: ease-out
      shorthand:
        height: 1s
        opacity: [0.25s, 0.25s, ease-in]
        background: [2s, 2s]
    height: 200px
    opacity: 0.5
    background: red

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.

Edit


ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      ease: 'ease-out'
      shorthand: {
        height: 1s
        // 0.25s 0s 'ease-in'
        opacity: 0.25s default 'ease-in'
        // 0.5s 2s 'ease-out'
        background: default 2s default
      }
    }
    opacity: 0.5
    height: 200px
    background: red
  }
})


.test:
  width: 200px
  hover-on:
    option:
      ease: ease-out
      shorthand:
        height: 1s
        # 0.25s 0s ease-in
        opacity: [0.25s, default, ease-in]
        # 0.5s 2s ease-out
        background: [default, 2s, default]
    opacity: 0.5
    height: 200px
    background: red


.test {
  width: 200px;
}
.test:hover {
  opacity: 0.5;
  height: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 2s;
  transition-duration: 1s, 0.25s, 0.5s;
  transition-property: height, opacity, background;
  transition-timing-function: ease-out, ease-in, ease-out;
}

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      ease: 'ease-out'
      shorthand: {
        height: 1s
        // 0.25s 0s 'ease-in'
        opacity: 0.25s default 'ease-in'
        // 0.5s 2s 'ease-out'
        background: default 2s default
      }
    }
    opacity: 0.5
    height: 200px
    background: red
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 0.5;
  height: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 2s;
  transition-duration: 1s, 0.25s, 0.5s;
  transition-property: height, opacity, background;
  transition-timing-function: ease-out, ease-in, ease-out;
}

.test:
  width: 200px
  hover-on:
    option:
      ease: ease-out
      shorthand:
        height: 1s
        # 0.25s 0s ease-in
        opacity: [0.25s, default, ease-in]
        # 0.5s 2s ease-out
        background: [default, 2s, default]
    opacity: 0.5
    height: 200px
    background: red

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.

Edit


ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    font-size: 1em
    background: red
    shorthand: {
      height: 1s
      // omitted
      font-size: false
    }
  }
})


.test:
  width: 200px
  hover-on:
    height: 400px
    font-size: 1em
    background: red
    shorthand:
      height: 1s
      # omitted
      font-size: false


.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  font-size: 1em;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.5s;
  transition-property: height, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    font-size: 1em
    background: red
    shorthand: {
      height: 1s
      // omitted
      font-size: false
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  font-size: 1em;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 0.5s;
  transition-property: height, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  hover-on:
    height: 400px
    font-size: 1em
    background: red
    shorthand:
      height: 1s
      # omitted
      font-size: false

Notes

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

Global Shorthand¶

Description: The shorthand Object can be used in the global scope of the state Object.

Edit


ctr('.test', {
  width: 200px
  hover: {
    on: {
      height: 400px
      opacity: 1
    }
    non: {
      height: 200px
      opacity: 0.5
    }
    shorthand: {
      height: 1s 1s 'ease-in'
      opacity: 2s 2s 'ease-out'
    }
  }
})


.test:
  width: 200px
  hover:
    on:
      height: 400px
      opacity: 1
    non:
      height: 200px
      opacity: 0.5
    shorthand:
      height: [1s, 1s, ease-in]
      opacity: [2s, 2s, ease-out]


.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  height: 400px;
  transition-delay: 1s, 2s;
  transition-duration: 1s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-out;
}
.test:not(:hover) {
  opacity: 0.5;
  height: 200px;
  transition-delay: 1s, 2s;
  transition-duration: 1s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-out;
}

ctr('.test', {
  width: 200px
  hover: {
    on: {
      height: 400px
      opacity: 1
    }
    non: {
      height: 200px
      opacity: 0.5
    }
    shorthand: {
      height: 1s 1s 'ease-in'
      opacity: 2s 2s 'ease-out'
    }
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  height: 400px;
  transition-delay: 1s, 2s;
  transition-duration: 1s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-out;
}
.test:not(:hover) {
  opacity: 0.5;
  height: 200px;
  transition-delay: 1s, 2s;
  transition-duration: 1s, 2s;
  transition-property: height, opacity;
  transition-timing-function: ease-in, ease-out;
}

.test:
  width: 200px
  hover:
    on:
      height: 400px
      opacity: 1
    non:
      height: 200px
      opacity: 0.5
    shorthand:
      height: [1s, 1s, ease-in]
      opacity: [2s, 2s, ease-out]

Empty¶

Description: A shorthand Object can be used to soley generate transition properties.

Edit


ctr('.test', {
  width: 200px
  hover-non: {
    shorthand: {
      height: 1s 1s 'ease-in'
      width: 2s 2s 'ease-out'
    }
  }
})


.test:
  width: 200px
  hover-non:
    shorthand:
      height: [1s, 1s, ease-in]
      width: [2s, 2s, ease-out]


.test {
  width: 200px;
}
.test:not(:hover) {
  transition-delay: 1s, 2s;
  transition-duration: 1s, 2s;
  transition-property: height, width;
  transition-timing-function: ease-in, ease-out;
}

ctr('.test', {
  width: 200px
  hover-non: {
    shorthand: {
      height: 1s 1s 'ease-in'
      width: 2s 2s 'ease-out'
    }
  }
})

.test {
  width: 200px;
}
.test:not(:hover) {
  transition-delay: 1s, 2s;
  transition-duration: 1s, 2s;
  transition-property: height, width;
  transition-timing-function: ease-in, ease-out;
}

.test:
  width: 200px
  hover-non:
    shorthand:
      height: [1s, 1s, ease-in]
      width: [2s, 2s, ease-out]

Syntax¶

Basic¶

Multiple¶

With Option¶

Default Keyword¶

Omit¶

Global Shorthand¶

Empty¶

Compile Status: valid

Help

Resourses

Account

Syntax¶

Basic¶

Multiple¶

With Option¶

Default Keyword¶

Omit¶

Global Shorthand¶

Empty¶

Compile Status: valid

Social

Help

Resourses

Account