Key¶

Description: The key property can be defined in the option Object.

ctr('.test', {
  width: 200px
  state: {
    option: {
      key: 'focus'
    }
    on: {
      height: 300px
    }
  }
})

.test:
  width: 200px
  state:
    option:
      key: focus
    on:
      height: 300px

.test {
  width: 200px;
}
.test:focus {
  height: 300px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  state: {
    option: {
      key: 'focus'
    }
    on: {
      height: 300px
    }
  }
})

.test {
  width: 200px;
}
.test:focus {
  height: 300px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  state:
    option:
      key: focus
    on:
      height: 300px

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
  hover-on: {
    option: {
      transitionShorthand: true
    }
    color: red
    height: 200px
    font-size: 2em
  }
})

.test:
  width: 200px
  hover-on:
    option:
      transitionShorthand: true
    color: red
    height: 200px
    font-size: 2em

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  height: 200px;
  font-size: 2em;
  transition: font-size 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s, color 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s, height 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      transitionShorthand: true
    }
    color: red
    height: 200px
    font-size: 2em
  }
})

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  height: 200px;
  font-size: 2em;
  transition: font-size 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s, color 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s, height 0.5s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.test:
  width: 200px
  hover-on:
    option:
      transitionShorthand: true
    color: red
    height: 200px
    font-size: 2em

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

Transition¶

Description: The value of true for the transition option property omits the state from generating transition properties.

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      // transition will be omitted
      transition: false
    }
    color: red
    height: 200px
  }
})

.test:
  width: 200px
  hover-on:
    option:
      # transition will be omitted
      transition: false
    color: red
    height: 200px

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  height: 200px;
}

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      // transition will be omitted
      transition: false
    }
    color: red
    height: 200px
  }
})

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  height: 200px;
}

.test:
  width: 200px
  hover-on:
    option:
      # transition will be omitted
      transition: false
    color: red
    height: 200px

Notes

• Alias: trans

Transition Specific¶

Description: A List value for the transition option property omits specific CSS properties from generating transition properties.

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      // only creates transitions for color + font-size
      transition: 'color' 'font-size'
    }
    color: red
    height: 200px
    font-size: 2em
  }
})

.test:
  width: 200px
  hover-on:
    option:
      # only creates transitions for color + font-size
      transition: [color, font-size]
    color: red
    height: 200px
    font-size: 2em

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  height: 200px;
  font-size: 2em;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: font-size, color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      // only creates transitions for color + font-size
      transition: 'color' 'font-size'
    }
    color: red
    height: 200px
    font-size: 2em
  }
})

.test {
  width: 200px;
}
.test:hover {
  color: #f00;
  height: 200px;
  font-size: 2em;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: font-size, color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  hover-on:
    option:
      # only creates transitions for color + font-size
      transition: [color, font-size]
    color: red
    height: 200px
    font-size: 2em

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
  hover-on: {
    option: {
      will-change: true
    }
    opacity: 1
    transform: translateY(10px)
  }
})

.test:
  width: 200px
  hover-on:
    option:
      will-change: true
    opacity: 1
    transform: translateY(10px)

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s, 0s;
  transform: translateY(10px);
  transition-duration: 0.5s, 0.5s;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      will-change: true
    }
    opacity: 1
    transform: translateY(10px)
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  transition-delay: 0s, 0s;
  transform: translateY(10px);
  transition-duration: 0.5s, 0.5s;
  will-change: transform, opacity;
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  hover-on:
    option:
      will-change: true
    opacity: 1
    transform: translateY(10px)

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: An List value for the will-change option property specifies a value for the will-change CSS property.

ctr('.test', {
  width: 200px
  hover-on: {
    option: {
      will-change: 'opacity' 'transform'
    }
    color: red
    opacity: 1
    transform: translateY(10px)
  }
})

.test:
  width: 200px
  hover-on:
    option:
      will-change: [opacity, transform]
    color: red
    opacity: 1
    transform: translateY(10px)

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  color: #f00;
  transform: translateY(10px);
  transition-delay: 0s, 0s, 0s;
  will-change: opacity, transform;
  transition-duration: 0.5s, 0.5s, 0.5s;
  transition-property: transform, color, opacity;
  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
  hover-on: {
    option: {
      will-change: 'opacity' 'transform'
    }
    color: red
    opacity: 1
    transform: translateY(10px)
  }
})

.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  color: #f00;
  transform: translateY(10px);
  transition-delay: 0s, 0s, 0s;
  will-change: opacity, transform;
  transition-duration: 0.5s, 0.5s, 0.5s;
  transition-property: transform, color, opacity;
  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
  hover-on:
    option:
      will-change: [opacity, transform]
    color: red
    opacity: 1
    transform: translateY(10px)

autoGen¶

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

ctr('.test', {
  width: 200px
  link: {
    option: {
      autoGen: true
    }
    on: {
      color: red
    }
    non: {
      color: blue
    }
  }
})

.test:
  width: 200px
  link:
    option:
      autoGen: true
    on:
      color: red
    non:
      color: blue

.test {
  width: 200px;
}
.test:link {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:link) {
  color: #00f;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  link: {
    option: {
      autoGen: true
    }
    on: {
      color: red
    }
    non: {
      color: blue
    }
  }
})

.test {
  width: 200px;
}
.test:link {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:link) {
  color: #00f;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  link:
    option:
      autoGen: true
    on:
      color: red
    non:
      color: blue

Notes

• Refer to the static identifier documentation
• States whose autoGen value is false by default link, optional, required, and valid

Global¶

Description: The value of true for the global option property places the non CSS properties directly on the scope selector rather than in a negation pseudo-class.

ctr('.test', {
  width: 200px
  hover: {
    on: {
      height: 200px
    }
    non: {
      option: {
        global: true
      }
      height: 100px
    }
  }
})

.test:
  width: 200px
  hover:
    on:
      height: 200px
    non:
      option:
        global: true
      height: 100px

.test {
  width: 200px;
  height: 100px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover {
  height: 200px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  hover: {
    on: {
      height: 200px
    }
    non: {
      option: {
        global: true
      }
      height: 100px
    }
  }
})

.test {
  width: 200px;
  height: 100px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover {
  height: 200px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  hover:
    on:
      height: 200px
    non:
      option:
        global: true
      height: 100px

Notes

• An OG option from way from back in the day of Buttron
• Unless you are supporting the browser which must not be named, I’m not sure why you would want to do this, nevertheless you can