Animation

Description: animation can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
// animation
animation: {
name: 'beer'
timeline: {
'50%': {
color: blue
}
}
}
}
})
.test:
width: 200px
hover-on:
# animation
animation:
name: beer
timeline:
50%:
color: blue
.test {
width: 200px;
}
.test:hover {
animation-delay: 0s;
animation-name: beer;
animation-duration: 0.5s;
animation-fill-mode: none;
animation-direction: normal;
animation-iteration-count: 1;
animation-play-state: running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes beer {
50% {
color: #00f;
}
}
ctr('.test', {
  width: 200px
  hover-on: {
    // animation
    animation: {
      name: 'beer'
      timeline: {
        '50%': {
          color: blue
        }
      }
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  animation-delay: 0s;
  animation-name: beer;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes beer {
  50% {
    color: #00f;
  }
}
.test:
  width: 200px
  hover-on:
    # animation
    animation:
      name: beer
      timeline:
        50%:
          color: blue

Attribute

Description: attribute can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// attribute
attribute: {
key: '[data-role="test"]'
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# attribute
attribute:
key: '[data-role="test"]'
opacity: 1
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test[data-role="test"]:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // attribute
    attribute: {
      key: '[data-role="test"]'
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test[data-role="test"]:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # attribute
    attribute:
      key: '[data-role="test"]'
      opacity: 1

Component

Description: component can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// component
component-section: {
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# component
component-section:
opacity: 1
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover > section {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // component
    component-section: {
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover > section {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # component
    component-section:
      opacity: 1

Element

Description: element can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// element -> pseudo-class
first-child: {
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# element -> pseudo-class
first-child:
opacity: 1
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:first-child:hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // element -> pseudo-class
    first-child: {
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:first-child:hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # element -> pseudo-class
    first-child:
      opacity: 1
Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// element -> pseudo-element
before: {
content: 'hello'
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# element -> pseudo-element
before:
content: hello
opacity: 1
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover::before {
opacity: 1;
content: "hello";
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // element -> pseudo-element
    before: {
      content: 'hello'
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover::before {
  opacity: 1;
  content: "hello";
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # element -> pseudo-element
    before:
      content: hello
      opacity: 1

Notes

Grid

Description: grid can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// grid -> non-flex
grid: {
align: 'right' false
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# grid -> non-flex
grid:
align: [right, false]
.test {
width: 200px;
}
.test:hover {
height: 400px;
position: relative;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover > * {
right: 0;
top: 50%;
left: auto;
bottom: auto;
position: absolute;
transform: translate(0, -50%);
transition-delay: 0s, 0s, 0s, 0s, 0s;
transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
transition-property: top, right, bottom, left, transform;
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), cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // grid -> non-flex
    grid: {
      align: 'right' false
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  position: relative;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:hover > * {
  right: 0;
  top: 50%;
  left: auto;
  bottom: auto;
  position: absolute;
  transform: translate(0, -50%);
  transition-delay: 0s, 0s, 0s, 0s, 0s;
  transition-duration: 0.5s, 0.5s, 0.5s, 0.5s, 0.5s;
  transition-property: top, right, bottom, left, transform;
  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), cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # grid -> non-flex
    grid:
      align: [right, false]

Notes

Media

Description: media can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// media
media-md: {
height: 300px
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# media
media-md:
height: 300px
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
.test:hover {
height: 300px;
}
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // media
    media-md: {
      height: 300px
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:hover {
    height: 300px;
  }
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # media
    media-md:
      height: 300px
Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// new property and option
media-md: {
option: {
duration: 1s
}
height: 300px
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# new property and option
media-md:
option:
duration: 1s
height: 300px
opacity: 1
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
.test:hover {
opacity: 1;
height: 300px;
transition-delay: 0s, 0s;
transition-duration: 1s, 1s;
transition-property: height, 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: {
    height: 400px
    // new property and option
    media-md: {
      option: {
        duration: 1s
      }
      height: 300px
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-width: 600px) and (max-width: 800px) {
  .test:hover {
    opacity: 1;
    height: 300px;
    transition-delay: 0s, 0s;
    transition-duration: 1s, 1s;
    transition-property: height, 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:
    height: 400px
    # new property and option
    media-md:
      option:
        duration: 1s
      height: 300px
      opacity: 1

Notes

Non

Description: non can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// non
non-span: {
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# non
non-span:
opacity: 1
.test {
width: 200px;
}
.test:hover {
height: 400px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: height;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(span):hover {
opacity: 1;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  hover-on: {
    height: 400px
    // non
    non-span: {
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  height: 400px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: height;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(span):hover {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  hover-on:
    height: 400px
    # non
    non-span:
      opacity: 1

Transition

Description: transition can be used in a state.

Edit
ctr('.test', {
width: 200px
hover-on: {
height: 400px
// transition
transition: {
opacity: 1
}
}
})
.test:
width: 200px
hover-on:
height: 400px
# transition
transition:
opacity: 1
.test {
width: 200px;
}
.test:hover {
opacity: 1;
height: 400px;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: height, 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: {
    height: 400px
    // transition
    transition: {
      opacity: 1
    }
  }
})
.test {
  width: 200px;
}
.test:hover {
  opacity: 1;
  height: 400px;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: height, 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:
    height: 400px
    # transition
    transition:
      opacity: 1