Shorthand Properties

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

Edit
ctr('.test', {
width: 200px
transition: {
option: {
duration: 1s
transitionShorthand: true
}
opacity: 1
color: black
background: red
}
})
.test:
width: 200px
transition:
option:
duration: 1s
transitionShorthand: true
opacity: 1
color: black
background: red
.test {
opacity: 1;
color: #000;
width: 200px;
background: #f00;
transition: opacity 1s cubic-bezier(0.42, 0, 0.58, 1) 0s, color 1s cubic-bezier(0.42, 0, 0.58, 1) 0s, background 1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      duration: 1s
      transitionShorthand: true
    }
    opacity: 1
    color: black
    background: red
  }
})
.test {
  opacity: 1;
  color: #000;
  width: 200px;
  background: #f00;
  transition: opacity 1s cubic-bezier(0.42, 0, 0.58, 1) 0s, color 1s cubic-bezier(0.42, 0, 0.58, 1) 0s, background 1s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.test:
  width: 200px
  transition:
    option:
      duration: 1s
      transitionShorthand: true
    opacity: 1
    color: black
    background: red

Notes

Will-change

Description: The value of true for the will-change option property creates a will-change CSS property for all transition property values.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
will-change: true
duration: 1s
}
opacity: 1
background: red
}
})
.test:
width: 200px
transition:
option:
will-change: true
duration: 1s
opacity: 1
background: red
.test {
opacity: 1;
width: 200px;
background: #f00;
transition-delay: 0s, 0s;
transition-duration: 1s, 1s;
will-change: opacity, background;
transition-property: opacity, background;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      will-change: true
      duration: 1s
    }
    opacity: 1
    background: red
  }
})
.test {
  opacity: 1;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 1s, 1s;
  will-change: opacity, background;
  transition-property: opacity, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    option:
      will-change: true
      duration: 1s
    opacity: 1
    background: red

Notes

Will-change Specific

Description: A List value for the will-change option property specifies a value for the will-change CSS property.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
duration: 1s
will-change: 'opacity' 'background'
}
opacity: 1
color: black
background: red
}
})
.test:
width: 200px
transition:
option:
duration: 1s
will-change: [opacity, background]
opacity: 1
color: black
background: red
.test {
opacity: 1;
color: #000;
width: 200px;
background: #f00;
transition-delay: 0s, 0s, 0s;
transition-duration: 1s, 1s, 1s;
will-change: opacity, background;
transition-property: opacity, color, background;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      duration: 1s
      will-change: 'opacity' 'background'
    }
    opacity: 1
    color: black
    background: red
  }
})
.test {
  opacity: 1;
  color: #000;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s, 0s;
  transition-duration: 1s, 1s, 1s;
  will-change: opacity, background;
  transition-property: opacity, color, background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    option:
      duration: 1s
      will-change: [opacity, background]
    opacity: 1
    color: black
    background: red