Basic

Description: By default, a feature defined in a transition Object inherits the options of the transition. The feature option Object then controls both the transition options and the feature options.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
duration: 2s
delay: 0.5s
ease: 'ease-in'
}
opacity: 1
// inherits options
element: {
// option Object becomes both the element
// and the transition option
option: {
// element key
key: 'before'
// override 2s duration
shorthand: {
font-size: 1s
}
}
color: red
font-size: 1em
}
}
})
.test:
width: 200px
transition:
option:
duration: 2s
delay: 0.5s
ease: ease-in
opacity: 1
# inherits options
element:
# option Object becomes both the element
# and the transition option
option:
# element key
key: before
# override 2s duration
shorthand:
font-size: 1s
color: red
font-size: 1em
.test {
opacity: 1;
width: 200px;
transition-delay: 0.5s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
.test::before {
color: #f00;
font-size: 1em;
transition-duration: 1s, 2s;
transition-delay: 0.5s, 0.5s;
transition-property: font-size, color;
transition-timing-function: ease-in, ease-in;
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      duration: 2s
      delay: 0.5s
      ease: 'ease-in'
    }
    opacity: 1

    // inherits options
    element: {
      // option Object becomes both the element
      // and the transition option
      option: {
        // element key
        key: 'before'
        // override 2s duration
        shorthand: {
          font-size: 1s
        }
      }
      color: red
      font-size: 1em
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test::before {
  color: #f00;
  font-size: 1em;
  transition-duration: 1s, 2s;
  transition-delay: 0.5s, 0.5s;
  transition-property: font-size, color;
  transition-timing-function: ease-in, ease-in;
}
.test:
  width: 200px
  transition:
    option:
      duration: 2s
      delay: 0.5s
      ease: ease-in
    opacity: 1
    # inherits options
    element:
      # option Object becomes both the element
      # and the transition option
      option:
        # element key
        key: before
        # override 2s duration
        shorthand:
          font-size: 1s
      color: red
      font-size: 1em

Notes

inheritOption

Description: The value of false for the inheritOption option property in a feature defined in a transition Object will not inherit the set options of said transition.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
duration: 2s
delay: 0.5s
ease: 'ease-in'
}
opacity: 1
// inherits options
element: {
// option Object becomes both the element
// and the transition option
option: {
// element key
key: 'before'
// reset to global defaults
inheritOption: false
}
color: red
font-size: 1em
}
}
})
.test:
width: 200px
transition:
option:
duration: 2s
delay: 0.5s
ease: ease-in
opacity: 1
# inherits options
element:
# option Object becomes both the element
# and the transition option
option:
# element key
key: before
# reset to global defaults
inheritOption: false
color: red
font-size: 1em
.test {
opacity: 1;
width: 200px;
transition-delay: 0.5s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: ease-in;
}
.test::before {
color: #f00;
font-size: 1em;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: color, font-size;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      duration: 2s
      delay: 0.5s
      ease: 'ease-in'
    }
    opacity: 1

    // inherits options
    element: {
      // option Object becomes both the element
      // and the transition option
      option: {
        // element key
        key: 'before'
        // reset to global defaults
        inheritOption: false
      }
      color: red
      font-size: 1em
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  transition-delay: 0.5s;
  transition-duration: 2s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}
.test::before {
  color: #f00;
  font-size: 1em;
  transition-delay: 0s, 0s;
  transition-duration: 0.5s, 0.5s;
  transition-property: color, font-size;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  transition:
    option:
      duration: 2s
      delay: 0.5s
      ease: ease-in
    opacity: 1
    # inherits options
    element:
      # option Object becomes both the element
      # and the transition option
      option:
        # element key
        key: before
        # reset to global defaults
        inheritOption: false
      color: red
      font-size: 1em

Notes

inheritProperty

Description: The inheritProperty option property is a media specific option. It controls whether or not the transition transition properties are regenerated due to an introduction of a new CSS property or option value in a media feature.

Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
media: {
'md': {
// No need to regenerate of transition properties
// for media since it can inherit the parents
opacity: 0.85
}
'lg': {
// Due to a different option the transition
// properties will need to be regenerate
option: {
duration: 2s
}
opacity: 0.65
}
}
}
})
.test:
width: 200px
transition:
opacity: 1
media:
md:
# No need to regenerate of transition properties
# for media since it can inherit the parents
opacity: 0.85
lg:
# Due to a different option the transition
# properties will need to be regenerate
option:
duration: 2s
opacity: 0.65
.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.85;
}
}
@media (min-width: 800px) and (max-width: 1050px) {
.test {
opacity: 0.65;
transition-delay: 0s;
transition-duration: 2s;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
}
ctr('.test', {
  width: 200px
  transition: {
    opacity: 1
    media: {
      'md': {
        // No need to regenerate of transition properties
        // for media since it can inherit the parents
        opacity: 0.85
      }
      'lg': {
        // Due to a different option the transition
        // properties will need to be regenerate
        option: {
          duration: 2s
        }
        opacity: 0.65
      }
    }
  }
})
.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.85;
  }
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test {
    opacity: 0.65;
    transition-delay: 0s;
    transition-duration: 2s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
}
.test:
  width: 200px
  transition:
    opacity: 1
    media:
      md:
        # No need to regenerate of transition properties
        # for media since it can inherit the parents
        opacity: 0.85
      lg:
        # Due to a different option the transition
        # properties will need to be regenerate
        option:
          duration: 2s
        opacity: 0.65
Edit
ctr('.test', {
width: 200px
transition: {
opacity: 1
media: {
'md': {
// Pulls in the parent properties to make a
// new transition since color is not declared
// in the parent
color: red
}
'lg': {
option: {
// Overrides the default and the parent
// properties are not pulled in to make
// a new transition
inheritProperty: false
}
color: blue
}
}
}
})
.test:
width: 200px
transition:
opacity: 1
media:
md:
# Pulls in the parent properties to make a
# new transition since color is not declared
# in the parent
color: red
lg:
option:
# Overrides the default and the parent
# properties are not pulled in to make
# a new transition
inheritProperty: false
color: blue
.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;
color: #f00;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: color, opacity;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
}
@media (min-width: 800px) and (max-width: 1050px) {
.test {
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
  transition: {
    opacity: 1
    media: {
      'md': {
        // Pulls in the parent properties to make a
        // new transition since color is not declared
        // in the parent
        color: red
      }
      'lg': {
        option: {
          // Overrides the default and the parent
          // properties are not pulled in to make
          // a new transition
          inheritProperty: false
        }
        color: blue
      }
    }
  }
})
.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;
    color: #f00;
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0.5s;
    transition-property: color, opacity;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
  }
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test {
    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
  transition:
    opacity: 1
    media:
      md:
        # Pulls in the parent properties to make a
        # new transition since color is not declared
        # in the parent
        color: red
      lg:
        option:
          # Overrides the default and the parent
          # properties are not pulled in to make
          # a new transition
          inheritProperty: false
        color: blue

Notes

Inherit

Description: The inherit option property controls both the inheritOption and inheritProperty option properties.

Edit
ctr('.test', {
width: 200px
transition: {
option: {
delay: 1s
}
opacity: 1
media: {
'md': {
opacity: 0.9
color: orange
}
'lg': {
// inherit === inheritOption && inheritProperty
option: {
inherit: false
}
opacity: 0.8
color: purple
}
}
}
})
.test:
width: 200px
transition:
option:
delay: 1s
opacity: 1
media:
md:
opacity: 0.9
color: orange
lg:
# inherit === inheritOption && inheritProperty
option:
inherit: false
opacity: 0.8
color: purple
.test {
opacity: 1;
width: 200px;
transition-delay: 1s;
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.9;
color: #ffa500;
transition-delay: 1s, 1s;
transition-duration: 0.5s, 0.5s;
transition-property: opacity, color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
}
@media (min-width: 800px) and (max-width: 1050px) {
.test {
opacity: 0.8;
color: #800080;
transition-delay: 0s, 0s;
transition-duration: 0.5s, 0.5s;
transition-property: opacity, color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
}
ctr('.test', {
  width: 200px
  transition: {
    option: {
      delay: 1s
    }
    opacity: 1

    media: {
      'md': {
        opacity: 0.9
        color: orange
      }
      'lg': {
        // inherit === inheritOption && inheritProperty
        option: {
          inherit: false
        }
        opacity: 0.8
        color: purple
      }
    }
  }
})
.test {
  opacity: 1;
  width: 200px;
  transition-delay: 1s;
  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.9;
    color: #ffa500;
    transition-delay: 1s, 1s;
    transition-duration: 0.5s, 0.5s;
    transition-property: opacity, color;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
  }
}
@media (min-width: 800px) and (max-width: 1050px) {
  .test {
    opacity: 0.8;
    color: #800080;
    transition-delay: 0s, 0s;
    transition-duration: 0.5s, 0.5s;
    transition-property: opacity, color;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
  }
}
.test:
  width: 200px
  transition:
    option:
      delay: 1s
    opacity: 1
    media:
      md:
        opacity: 0.9
        color: orange
      lg:
        # inherit === inheritOption && inheritProperty
        option:
          inherit: false
        opacity: 0.8
        color: purple

Notes