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

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.

Edit
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

Option

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

Edit
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

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.

Edit
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

Timeline from-to Notation

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

Edit
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

@keyframes Reference

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

Edit
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