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

Local option Object always supersedes parent option Object

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

Default value: true
All options revert to the global defaults
inheritOption: alias inheritOpts

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

The only time inheritProperty defaults to true is in a media feature, otherwise the default is false
Admittedly, this option will make no sense if you are not deeply familiar with the perils of creating a transition with media conditions
- Rule of thumb, ctr takes care of everything for you thus you probably will never need this option
- If you are a l33t C$S haxx0r you may once or twice find this option handy
inheritProperty alias: inheritProps

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

inherit: <boolean> is equal to
- inheritOption: <boolean>
- inheritProperty: <boolean>

Basic¶

inheritOption¶

inheritProperty¶

Inherit¶

Compile Status: valid

Help

Resourses

Account

Basic¶

inheritOption¶

inheritProperty¶

Inherit¶

Compile Status: valid

Social

Help

Resourses

Account