Syntax¶

Description: animation is defined as a CSS animation sequence that can include an @keyframes at-rule.

ctr('<#selector>', {
  animation: {
    option: {
      name: '<identifier>'
      //animation-delay
      delay: '<value>' | 0s
      //animation-duration
      duration: '<value>' | 0.5s
      //animation-fill-mode
      mode: '<value>' | none
      //animation-direction
      direction: '<value>' | normal
      //animation-iteration-count
      count: '<value>' | 1
      //animation-play-state
      state: '<value>' | running
      //animation-timing-function
      ease: '<value>' | cubic-bezier(0.42, 0, 0.58, 1)
    }
    timeline: {
      '<value>': {
        <...>: <...>
      }
    }
  }
})

<#selector>:
  animation:
    option:
      name: <identifier>
      # animation-delay
      delay: <value> | 0s
      # animation-duration
      duration: <value> | 0.5s
      # animation-fill-mode
      mode: <value> | none
      # animation-direction
      direction: <value> | normal
      # animation-iteration-count
      count: <value> | 1
      # animation-play-state
      state: <value> | running
      # animation-timing-function
      ease: <value> | cubic-bezier(0.42, 0, 0.58, 1)
    timeline:
      <value>:
        <...>: <...>

<#selector> {
  animation-name: <identifier>;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes <identifier> {
  <value> {
    <...>: <...>;
  }
}

Notes

• Regex match: /^anim$|^animation$|^animations$|^anim-|^animation-/i
• MDN Using CSS animations
• MDN @keyframes

Basic¶

Description: The animation Object creates animation properties for the <identifier> at the scope level it is defined. Additionally, an @keyframes at-rule for the <identifier> can be created through a timeline Object in the root of the animation Object. If a timeline Object is defined, the waypoints for its @keyframes at-rule are specified in the timeline through a child Object in which the Object key represents the waypoint for its corresponding CSS property values.

ctr('.test', {
  width: 200px
  animation: {
    name: 'identifier-name'
    timeline: {
      '50%': {
        background: teal
      }
    }
  }
})

.test:
  width: 200px
  animation:
    name: identifier-name
    timeline:
      50%:
        background: teal

.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: identifier-name;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes identifier-name {
  50% {
    background: #008080;
  }
}

ctr('.test', {
  width: 200px
  animation: {
    name: 'identifier-name'
    timeline: {
      '50%': {
        background: teal
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: identifier-name;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes identifier-name {
  50% {
    background: #008080;
  }
}

.test:
  width: 200px
  animation:
    name: identifier-name
    timeline:
      50%:
        background: teal

Notes

• animation alias: anim
• timeline alias: tl
• You don’t need to define name: <identifier>, but I recommend you do otherwise your animation-name property value will default to a random hash
• I recommend you always define a waypoint Object key as a percent String value
• Unfortunately, right now you cannot use the media feature inside animation
  • To get around this limitation, you can place animation inside of media(i.e., the other way around)

Option¶

Description: An option Object in an animation Object alters the default animation property values.

ctr('.test', {
  width: 200px
  animation: {
    option: {
      name: 'test'
      // animation-delay
      delay: 100s
      // animation-duration
      duration: 200s
      // animation-direction
      direction: normal
      // animation-play-state
      state: paused
      // animation-fill-mode
      mode: forwards
      // animation-iteration-count
      count: 420
      // animation-timing-function
      ease: ease-out
    }
    timeline: {
      '50%': {
        width: 400px
      }
    }
  }
})

.test:
  width: 200px
  animation:
    option:
      name: test
      # animation-delay
      delay: 100s
      # animation-duration
      duration: 200s
      # animation-direction
      direction: normal
      # animation-play-state
      state: paused
      # animation-fill-mode
      mode: forwards
      # animation-iteration-count
      count: 420
      # animation-timing-function
      ease: ease-out
    timeline:
      50%:
        width: 400px

.test {
  width: 200px;
  animation-name: test;
  animation-delay: 100s;
  animation-duration: 200s;
  animation-direction: normal;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  animation-iteration-count: 420;
  animation-timing-function: ease-out;
}
@keyframes test {
  50% {
    width: 400px;
  }
}

ctr('.test', {
  width: 200px
  animation: {
    option: {
      name: 'test'
      // animation-delay
      delay: 100s
      // animation-duration
      duration: 200s
      // animation-direction
      direction: normal
      // animation-play-state
      state: paused
      // animation-fill-mode
      mode: forwards
      // animation-iteration-count
      count: 420
      // animation-timing-function
      ease: ease-out
    }
    timeline: {
      '50%': {
        width: 400px
      }
    }
  }
})

.test {
  width: 200px;
  animation-name: test;
  animation-delay: 100s;
  animation-duration: 200s;
  animation-direction: normal;
  animation-play-state: paused;
  animation-fill-mode: forwards;
  animation-iteration-count: 420;
  animation-timing-function: ease-out;
}
@keyframes test {
  50% {
    width: 400px;
  }
}

.test:
  width: 200px
  animation:
    option:
      name: test
      # animation-delay
      delay: 100s
      # animation-duration
      duration: 200s
      # animation-direction
      direction: normal
      # animation-play-state
      state: paused
      # animation-fill-mode
      mode: forwards
      # animation-iteration-count
      count: 420
      # animation-timing-function
      ease: ease-out
    timeline:
      50%:
        width: 400px

Notes

• Option keys and their corresponding animation property:
  • duration === animation-duration
  • ease === animation-timing-function
  • delay === animation-delay
  • count === animation-iteration-count
  • direction === animation-direction
  • mode === animation-fill-mode
  • state === animation-play-state
• Any option that is not defined will use the set default value:
  • duration === normal
  • ease === running
  • delay === 0s
  • count === cubic-bezier(0.42, 0, 0.58, 1)
  • direction === 1
  • mode === 0.5s
  • state === none
• All of the above option properties, including the name property, can be defined inside or outside the option Object
• If you need to, or prefer the animation shorthand properties syntax, as in animation: duration | timing-function | ..., you can do so through the animationShorthand option

Timeline Unit Notation¶

Description: A waypoint key for the timeline Object can be specified as a percent String value or a Number value which is then converted into a percent.

ctr('.test', {
  width: 200px
  animation: {
    name: 'test'
    timeline: {
      // don't need the `%`
      '0': {
        font-size: 1em
      }
      '50%': {
        font-size: 1.5em
      }
      '100%': {
        font-size: 2em
      }
    }
  }
})

.test:
  width: 200px
  animation:
    name: test
    timeline:
      # dont need the `%`
      0:
        font-size: 1em
      50%:
        font-size: 1.5em
      100%:
        font-size: 2em

.test {
  width: 200px;
  animation-delay: 0s;
  animation-name: test;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes test {
  0% {
    font-size: 1em;
  }
  50% {
    font-size: 1.5em;
  }
  100% {
    font-size: 2em;
  }
}

ctr('.test', {
  width: 200px
  animation: {
    name: 'test'
    timeline: {
      // don't need the `%`
      '0': {
        font-size: 1em
      }
      '50%': {
        font-size: 1.5em
      }
      '100%': {
        font-size: 2em
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s;
  animation-name: test;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes test {
  0% {
    font-size: 1em;
  }
  50% {
    font-size: 1.5em;
  }
  100% {
    font-size: 2em;
  }
}

.test:
  width: 200px
  animation:
    name: test
    timeline:
      # dont need the `%`
      0:
        font-size: 1em
      50%:
        font-size: 1.5em
      100%:
        font-size: 2em

Notes

• I always recommend using a percent String value to avoid any potential mental slip ups
• Raw numbers are converted into percent
• You can mix and match with from-to notation

Timeline from-to Notation¶

Description: A waypoint key for the timeline Object can be specified as a from or to final state value.

ctr('.test', {
  width: 200px
  animation: {
    name: 'test'
    timeline: {
      'from': {
        font-size: 1rem
      }
      'to': {
        font-size: 1.2rem
      }
    }
  }
})

.test:
  width: 200px
  animation:
    name: test
    timeline:
      from:
        font-size: 1rem
      to:
        font-size: 1.2rem

.test {
  width: 200px;
  animation-delay: 0s;
  animation-name: test;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes test {
  from {
    font-size: 1rem;
  }
  to {
    font-size: 1.2rem;
  }
}

ctr('.test', {
  width: 200px
  animation: {
    name: 'test'
    timeline: {
      'from': {
        font-size: 1rem
      }
      'to': {
        font-size: 1.2rem
      }
    }
  }
})

.test {
  width: 200px;
  animation-delay: 0s;
  animation-name: test;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes test {
  from {
    font-size: 1rem;
  }
  to {
    font-size: 1.2rem;
  }
}

.test:
  width: 200px
  animation:
    name: test
    timeline:
      from:
        font-size: 1rem
      to:
        font-size: 1.2rem

Notes

• You can mix and match with unit notation

@keyframes Reference¶

Description: A predefined @keyframes at-rule can be referenced without defining the corresponding timeline Object.

ctr('.test', {
  width: 200px
  animation: {
    name: 'my-kool-animation'
    duration: 3s
  }
})

.test:
  width: 200px
  animation:
    name: my-kool-animation
    duration: 3s

.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: my-kool-animation;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  animation: {
    name: 'my-kool-animation'
    duration: 3s
  }
})

.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-name: my-kool-animation;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  animation:
    name: my-kool-animation
    duration: 3s