Step Option¶

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

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

• The syntax is as expected: steps(number-of-steps, direction)
• Can be in String format and used within shorthand notation
• MDN steps() class of timing-functions

Shorthand Properties¶

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

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

• animationShorthand can be set locally or globally
• Default value is false because shorthand properties are a pain to work with
• MDN animation
• MDN Shorthand properties

autoGen¶

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

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