Step Option

Description: A steps value for the ease option property can be used.

Edit
ctr('.test', {
width: 200px
animation: {
option: {
ease: steps(5, start)
}
timeline: 'stepTest'
}
})
.test:
width: 200px
animation:
option:
ease: steps(5, start)
timeline: stepTest
.test {
width: 200px;
animation-delay: 0s;
animation-duration: 0.5s;
animation-name: stepTest;
animation-fill-mode: none;
animation-direction: normal;
animation-iteration-count: 1;
animation-play-state: running;
animation-timing-function: steps(5, start);
}
ctr('.test', {
  width: 200px
  animation: {
    option: {
      ease: steps(5, start)
    }
    timeline: 'stepTest'
  }
})
.test {
  width: 200px;
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-name: stepTest;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: steps(5, start);
}
.test:
  width: 200px
  animation:
    option:
      ease: steps(5, start)
    timeline: stepTest

Notes

Shorthand Properties

Description: A Boolean value for the animationShorthand option property controls if the animation utilizes the shorthand syntax or the longhand syntax.

Edit
ctr('.test', {
width: 200px
animation: {
option: {
name: 'shorthand'
animationShorthand: true
}
timeline: {
'50%': {
background: green
}
}
}
})
.test:
width: 200px
animation:
option:
name: shorthand
animationShorthand: true
timeline:
50%:
background: green
.test {
width: 200px;
animation: 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s 1 normal none running shorthand;
}
@keyframes shorthand {
50% {
background: #008000;
}
}
ctr('.test', {
  width: 200px
  animation: {
    option: {
      name: 'shorthand'
      animationShorthand: true
    }
    timeline: {
      '50%': {
        background: green
      }
    }
  }
})
.test {
  width: 200px;
  animation: 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s 1 normal none running shorthand;
}
@keyframes shorthand {
  50% {
    background: #008000;
  }
}
.test:
  width: 200px
  animation:
    option:
      name: shorthand
      animationShorthand: true
    timeline:
      50%:
        background: green

Notes

autoGen

Description: A Boolean value for the autoGen option property controls if animation properties are generated for the animation.

Edit
ctr('.test', {
width: 200px
animation: {
option: {
name: 'noGenProps'
autoGen: false
}
timeline: {
'50%': {
background: green
}
}
}
})
.test:
width: 200px
animation:
option:
name: noGenProps
autoGen: false
timeline:
50%:
background: green
.test {
width: 200px;
}
@keyframes noGenProps {
50% {
background: #008000;
}
}
ctr('.test', {
  width: 200px
  animation: {
    option: {
      name: 'noGenProps'
      autoGen: false
    }
    timeline: {
      '50%': {
        background: green
      }
    }
  }
})
.test {
  width: 200px;
}
@keyframes noGenProps {
  50% {
    background: #008000;
  }
}
.test:
  width: 200px
  animation:
    option:
      name: noGenProps
      autoGen: false
    timeline:
      50%:
        background: green