Key

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

Edit
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.

Edit
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

Transition

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

Edit
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

Transition Specific

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

Edit
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.

Edit
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

Will-change Specific

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

Edit
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.

Edit
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

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.

Edit
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