Animation

Description: animation can be used in a transition.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
// animation
animation: {
name: 'test'
timeline: {
'50%': {
background: black
}
}
}
}
})
.test:
width: 200px
transition:
opacity: 1
# animation
animation:
name: test
timeline:
50%:
background: black
.test {
opacity: 1;
width: 200px;
animation-delay: 0s;
animation-name: test;
transition-delay: 0s;
animation-duration: 0.5s;
animation-fill-mode: none;
transition-duration: 0.5s;
animation-direction: normal;
animation-iteration-count: 1;
transition-property: opacity;
animation-play-state: running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes test {
50% {
background: #000;
}
}
ctr('.test', {
  width: 200px
  transition: {
    opacity: 1
    // animation
    animation: {
      name: 'test'
      timeline: {
        '50%': {
          background: black
        }
      }
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  animation-delay: 0s;
  animation-name: test;
  transition-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  transition-duration: 0.5s;
  animation-direction: normal;
  animation-iteration-count: 1;
  transition-property: opacity;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes test {
  50% {
    background: #000;
  }
}
.test:
  width: 200px
  transition:
    opacity: 1
    # animation
    animation:
      name: test
      timeline:
        50%:
          background: black

Attribute

Description: attribute can be used in a transition.

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

Component

Description: component can be used in a transition.

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

Element

Description: element can be used in a transition.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
// element
first-child: {
background: black
}
}
})
.test:
width: 200px
transition:
opacity: 1
# element
first-child:
background: black
.test {
opacity: 1;
width: 200px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:first-child {
background: #000;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: background;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    opacity: 1
    // element
    first-child: {
      background: black
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:first-child {
  background: #000;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: background;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    opacity: 1
    # element
    first-child:
      background: black

Grid

Description: grid can be used in a transition.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
// grid
grid: {
column: '1/3'
}
}
})
.test:
width: 200px
transition:
opacity: 1
# grid
grid:
column: 1/3
.test {
opacity: 1;
width: 200px;
flex: 0 0 auto;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:nth-child(1n) {
margin-right: 30px;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: margin-right;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:last-child {
margin-right: 0;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: margin-right;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:nth-child(3n) {
float: right;
margin-right: 0;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: float, margin-right;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    opacity: 1
    // grid
    grid: {
      column: '1/3'
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  flex: 0 0 auto;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:nth-child(1n) {
  margin-right: 30px;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: margin-right;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:last-child {
  margin-right: 0;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: margin-right;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:nth-child(3n) {
  float: right;
  margin-right: 0;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: float, margin-right;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    opacity: 1
    # grid
    grid:
      column: 1/3

Notes

Media

Description: media can be used in a transition.

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

Notes

Non

Description: non can be used in a transition.

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

State

Description: state can be used in a transition.

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