ApplyTo¶

Description: The applyTo option property applies its value to the <identifier>.

ctr('.test', {
  width: 200px
  animation: {
    option: {
      applyTo: span
    }
    timeline: 'applyToTest'
  }
})

.test:
  width: 200px
  animation:
    option:
      applyTo: span
    timeline: applyToTest

.test {
  width: 200px;
}
.test span {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-name: applyToTest;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  animation: {
    option: {
      applyTo: span
    }
    timeline: 'applyToTest'
  }
})

.test {
  width: 200px;
}
.test span {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-name: applyToTest;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  animation:
    option:
      applyTo: span
    timeline: applyToTest

Notes

• The applyTo property differs from the appendTo property in that there is space between the <identifier> and the applyTo value
  • applyTo <identifier> <applyTo>
  • appendTo <identifier><appendTo>

AppendTo¶

Description: The appendTo option property appends its value to the <identifier>.

ctr('.test', {
  width: 200px
  animation: {
    option: {
      appendTo: '.beerMe'
    }
    timeline: 'appendToTest'
  }
})

.test:
  width: 200px
  animation:
    option:
      appendTo: .beerMe
    timeline: appendToTest

.test {
  width: 200px;
}
.test.beerMe {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-name: appendToTest;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  animation: {
    option: {
      appendTo: '.beerMe'
    }
    timeline: 'appendToTest'
  }
})

.test {
  width: 200px;
}
.test.beerMe {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-name: appendToTest;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  animation:
    option:
      appendTo: .beerMe
    timeline: appendToTest

Notes

• The appendTo property differs from the applyTo property in that there is no space between the <identifier> and the appendTo value
  • appendTo <identifier><appendTo>
  • applyTo <identifier> <applyTo>

Override¶

Description: The override option property overrides the entirety of the selector, including the <identifier>, with its value.

ctr('.test', {
  width: 200px
  animation: {
    option: {
      override: '#override'
    }
    timeline: 'overrideTest'
  }
})

.test:
  width: 200px
  animation:
    option:
      override: '#override'
    timeline: overrideTest

.test {
  width: 200px;
}
#override {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-name: overrideTest;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  animation: {
    option: {
      override: '#override'
    }
    timeline: 'overrideTest'
  }
})

.test {
  width: 200px;
}
#override {
  animation-delay: 0s;
  animation-duration: 0.5s;
  animation-fill-mode: none;
  animation-direction: normal;
  animation-name: overrideTest;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  animation:
    option:
      override: '#override'
    timeline: overrideTest

Notes

• Due to the nature of Stylus, this feature only works with a declarative ctr instance