Syntax

Description: transition is defined as CSS transition properties.

ctr('<#selector>', {
transition: {
option: {
delay: '<string>' | 0s
duration: '<string>' | 0.5s
property: '<string>' | <list> | <scope:properties>
ease: '<string>' | cubic-bezier(0.42, 0, 0.58, 1)
}
<property:A>: <...>
<property:B>: <...>
}
})
<#selector>:
transition:
option:
delay: <string> | 0s
duration: <string> | 0.5s
property: <string> | <list> | <scope:properties>
ease: <string> | cubic-bezier(0.42, 0, 0.58, 1)
<property:A>: <...>
<property:B>: <...>
<#selector> {
<property:A>: <...>;
<property:B>: <...>;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: <property:A>, <property:B>;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}

Notes

Basic

Description: A transition Object creates CSS transition properties for the CSS in the Object at the scope level it is defined.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
background: red
}
})
.test:
width: 200px
transition:
opacity: 1
background: red
.test {
opacity: 1;
width: 200px;
background: #f00;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
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: {
    opacity: 1
    background: red
  }
})
.test {
  opacity: 1;
  width: 200px;
  background: #f00;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  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:
    opacity: 1
    background: red

Notes

Option

Description: An option Object in the transition Object alters the default transition values.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
// transition-delay
delay: 20s
// transition-duration
duration: 4s
// transition-timing-function
ease: ease-out
}
opacity: 1
background: red
}
})
.test:
width: 200px
transition:
option:
# transition-delay
delay: 20s
# transition-duration
duration: 4s
# transition-timing-function
ease: ease-out
opacity: 1
background: red
.test {
opacity: 1;
width: 200px;
background: #f00;
transition-delay: 20s, 20s;
transition-duration: 4s, 4s;
transition-property: opacity, background;
transition-timing-function: ease-out, ease-out;
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      // transition-delay
      delay: 20s
      // transition-duration
      duration: 4s
      // transition-timing-function
      ease: ease-out
    }
    opacity: 1
    background: red
  }
})
.test {
  opacity: 1;
  width: 200px;
  background: #f00;
  transition-delay: 20s, 20s;
  transition-duration: 4s, 4s;
  transition-property: opacity, background;
  transition-timing-function: ease-out, ease-out;
}
.test:
  width: 200px
  transition:
    option:
      # transition-delay
      delay: 20s
      # transition-duration
      duration: 4s
      # transition-timing-function
      ease: ease-out
    opacity: 1
    background: red

Notes

Empty

Description: A transition Object can be used to generate transition properties without raw CSS properties.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
property: all
duration: 1s
}
}
})
.test:
width: 200px
transition:
option:
property: all
duration: 1s
.test {
width: 200px;
transition-delay: 0s;
transition-duration: 1s;
transition-property: all;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      property: all
      duration: 1s
    }
  }
})
.test {
  width: 200px;
  transition-delay: 0s;
  transition-duration: 1s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    option:
      property: all
      duration: 1s

Notes