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

• <identifier>: <duration> <delay> <ease> <count> <direction> <mode> <state>

Basic¶

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

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

• Order of shorthand properties:
  • Object key will represent the <identifier>
    1. animation-duration
    2. animation-delay
    3. animation-timing-function
    4. animation-iteration-count
    5. animation-direction
    6. animation-fill-mode
    7. animation-play-state
  • <identifier>: <duration> <delay> <ease> <count> <dir> <mode> <state>
• Any shorthand property that is omitted or uses the default key inherits the set default value
• The shorthand Object can either be defined in the root of the animation Object or in the option Object

With Option Values¶

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

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

• This feature gives you the ability to specify options in a more direct fashion rather than having to resort to using the default key a million times
  • example: 1s ease-in default default default default paused would just be a pain in the ass
• If an option is specified in both the option Object and the shorthand List, the shorthand value will supersede
• If an option is specified in the option Object and the default key is used in the shorthand List, the value defined in the option Object is inherited