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

• Regex: /^trans$|^transition$|^transitions$/i
• MDN transition-property
• MDN transition-duration
• MDN transition-delay
• MDN transition-timing-function

Basic¶

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

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

• transition alias: trans

Option¶

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

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

• Option properties and the corresponding transition properties
  • duration === transition-duration
  • delay === transition-delay
  • ease === transition-timing-function
  • property === transition-property
• Default option values
  • duration === 0.5s
  • delay === 0s
  • ease === cubic-bezier(0.42, 0, 0.58, 1)
  • property === If no value is specified properties are auto-generated from the scope
• You also can specify property-specific options usingshorthand - it’s bomb-[dot]-com
• If you need to, or prefer the transition shorthand properties syntax, as in transtion: name | duration | timing-function | ..., you can do so through the transitionShorthand option

Empty¶

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

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

• To use transition in this fashion, you must define a value for the property option in the option Object