Syntax

Description: shorthand is defined as abbreviated option notation.

ctr('<#selector>', {
animation: {
shorthand: {
'<identifier>': '<duration>' '<delay>' '<ease>' '<count>' '<direction>' '<mode>' '<state>'
}
timeline: {
'<value>': {
<...>: <...>
}
}
}
})
<#selector>:
animation:
shorthand:
<identifier>: [<duration>, <delay>, <ease>, <count>, <direction>, <mode>, <state>]
timeline:
<value>:
<...>: <...>
<#selector> {
animation-name: <identifier>;
animation-delay: <delay>;
animation-duration: <duration>;
animation-fill-mode: <mode>;
animation-direction: <direction>;
animation-iteration-count: <count>;
animation-play-state:<state>;
animation-timing-function: <ease>;
}
@keyframes <identifier> {
<value> {
<...>: <...>;
}
}

Notes

Basic

Description: A shorthand Object alters property-specific animation values through an <identifier> key whose List value corresponds to specific option values.

Edit
ctr('.test', {
width: 200px
animation: {
// name will be picked up from shorthand key
shorthand: {
// <identifier>: duration delay ease count dir mode state
jiving: 1s default ease-in 5 reverse both paused
}
timeline: {
'50%': {
background: teal
}
}
}
})
.test:
width: 200px
animation:
# name will be picked up from shorthand key
shorthand:
# <identifier>: [duration, delay, ease, count, dir, mode, state]
jiving: [1s, default, ease-in, 5, reverse, both, paused]
timeline:
50%:
background: teal
.test {
width: 200px;
animation-delay: 0s;
animation-duration: 1s;
animation-name: jiving;
animation-fill-mode: both;
animation-play-state: paused;
animation-direction: reverse;
animation-iteration-count: 5;
animation-timing-function: ease-in;
}
@keyframes jiving {
50% {
background: #008080;
}
}
ctr('.test', {
  width: 200px
  animation: {
    // name will be picked up from shorthand key
    shorthand: {
      // <identifier>: duration delay ease count dir mode state
      jiving: 1s default ease-in 5 reverse both paused
    }
    timeline: {
      '50%': {
        background: teal
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 1s;
  animation-name: jiving;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-direction: reverse;
  animation-iteration-count: 5;
  animation-timing-function: ease-in;
}
@keyframes jiving {
  50% {
    background: #008080;
  }
}
.test:
  width: 200px
  animation:
    # name will be picked up from shorthand key
    shorthand:
      # <identifier>: [duration, delay, ease, count, dir, mode, state]
      jiving: [1s, default, ease-in, 5, reverse, both, paused]
    timeline:
      50%:
        background: teal

Notes

With Option Values

Description: The option Obejct can be used in conjunction with shorthand notation.

Edit
ctr('.test', {
width: 200px
animation: {
option: {
state: paused
delay: 2s
shorthand: {
// default keyword inherit the
// parent option above or global
kool: 1s default ease-in 5
}
}
timeline: {
'50%': {
background: teal
}
}
}
})
.test:
width: 200px
animation:
option:
state: paused
delay: 2s
shorthand:
# default keyword inherit the
# parent option above or global
kool: [1s, default, ease-in, 5]
timeline:
50%:
background: teal
.test {
width: 200px;
animation-delay: 2s;
animation-name: kool;
animation-duration: 1s;
animation-fill-mode: none;
animation-direction: normal;
animation-play-state: paused;
animation-iteration-count: 5;
animation-timing-function: ease-in;
}
@keyframes kool {
50% {
background: #008080;
}
}
ctr('.test', {
  width: 200px
  animation: {
    option: {
      state: paused
      delay: 2s
      shorthand: {
        // default keyword inherit the
        // parent option above or global
        kool: 1s default ease-in 5
      }
    }
    timeline: {
      '50%': {
        background: teal
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 2s;
  animation-name: kool;
  animation-duration: 1s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-play-state: paused;
  animation-iteration-count: 5;
  animation-timing-function: ease-in;
}
@keyframes kool {
  50% {
    background: #008080;
  }
}
.test:
  width: 200px
  animation:
    option:
      state: paused
      delay: 2s
      shorthand:
        # default keyword inherit the
        # parent option above or global
        kool: [1s, default, ease-in, 5]
    timeline:
      50%:
        background: teal

Notes