Shorthand Properties¶

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

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

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

Will-change¶

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

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

• With great power comes great responsibility, and for this reason alone I am too scared to use will-change
• Everything You Need to Know About the CSS will-change Property
• MDN will-change

Will-change Specific¶

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

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