Basic

Description: The animations Object groups animation instances together in which each child Object is treated as a separate animation instance. If a name property is not defined in the animation instance, its Object key is used as the <identifier>.

Edit
ctr('.test', {
width: 200px
animations: {
one: {
name: meanMrMustard
timeline: {
'50%': {
background: green
}
}
}
// key becomes timeline name
two: {
timeline: {
'50%': {
color: green
}
}
}
}
})
.test:
width: 200px
animations:
one:
name: meanMrMustard
timeline:
50%:
background: green
# key becomes timeline name
two:
timeline:
50%:
color: green
.test {
width: 200px;
animation-delay: 0s, 0s;
animation-duration: 0.5s, 0.5s;
animation-fill-mode: none, none;
animation-iteration-count: 1, 1;
animation-name: meanMrMustard, two;
animation-direction: normal, normal;
animation-play-state: running, running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes meanMrMustard {
50% {
background: #008000;
}
}
@keyframes two {
50% {
color: #008000;
}
}
ctr('.test', {
  width: 200px
  animations: {
    one: {
      name: meanMrMustard
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    // key becomes timeline name
    two: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-duration: 0.5s, 0.5s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-name: meanMrMustard, two;
  animation-direction: normal, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes meanMrMustard {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}
.test:
  width: 200px
  animations:
    one:
      name: meanMrMustard
      timeline:
        50%:
          background: green
    # key becomes timeline name
    two:
      timeline:
        50%:
          color: green

Notes

Common Option

Description: A common Object can be defined in the animations Object to specify common values used by all animation instances.

Edit
ctr('.test', {
width: 200px
animations: {
// merged into each animation
common: {
option: {
state: paused
duration: 1s
}
}
making-magic: {
timeline: {
'50%': {
background: green
}
}
}
regularly: {
option: {
// trumps common
duration: 22s
}
timeline: {
'50%': {
color: green
}
}
}
}
})
.test:
width: 200px
animations:
# merged into each animation
common:
option:
state: paused
duration: 1s
making-magic:
timeline:
50%:
background: green
regularly:
option:
# trumps common
duration: 22s
timeline:
50%:
color: green
.test {
width: 200px;
animation-delay: 0s, 0s;
animation-duration: 1s, 22s;
animation-fill-mode: none, none;
animation-iteration-count: 1, 1;
animation-direction: normal, normal;
animation-play-state: paused, paused;
animation-name: making-magic, regularly;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes making-magic {
50% {
background: #008000;
}
}
@keyframes regularly {
50% {
color: #008000;
}
}
ctr('.test', {
  width: 200px
  animations: {
    // merged into each animation
    common: {
      option: {
        state: paused
        duration: 1s
      }
    }
    making-magic: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    regularly: {
      option: {
        // trumps common
        duration: 22s
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-duration: 1s, 22s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
  animation-play-state: paused, paused;
  animation-name: making-magic, regularly;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes making-magic {
  50% {
    background: #008000;
  }
}
@keyframes regularly {
  50% {
    color: #008000;
  }
}
.test:
  width: 200px
  animations:
    # merged into each animation
    common:
      option:
        state: paused
        duration: 1s
    making-magic:
      timeline:
        50%:
          background: green
    regularly:
      option:
        # trumps common
        duration: 22s
      timeline:
        50%:
          color: green

Notes

Omit

Description: A List value for the omit option property in an Object animation instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
animations: {
common: {
option: {
duration: 1s
direction: 'foward'
}
}
one: {
timeline: {
'50%': {
background: green
}
}
}
two: {
option: {
// omits the direction
omit: 'option.direction'
}
timeline: {
'50%': {
color: green
}
}
}
}
})
.test:
width: 200px
animations:
common:
option:
duration: 1s
direction: foward
one:
timeline:
50%:
background: green
two:
option:
# omits the direction
omit: option.direction
timeline:
50%:
color: green
.test {
width: 200px;
animation-delay: 0s, 0s;
animation-name: one, two;
animation-duration: 1s, 1s;
animation-fill-mode: none, none;
animation-iteration-count: 1, 1;
animation-direction: foward, normal;
animation-play-state: running, running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
50% {
background: #008000;
}
}
@keyframes two {
50% {
color: #008000;
}
}
ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      option: {
        // omits the direction
        omit: 'option.direction'
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}
.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
    one:
      timeline:
        50%:
          background: green
    two:
      option:
        # omits the direction
        omit: option.direction
      timeline:
        50%:
          color: green

Notes

Pick

Description: A List value for the pick option property in an Object animation instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
animations: {
common: {
option: {
duration: 1s
direction: 'foward'
}
}
one: {
timeline: {
'50%': {
background: green
}
}
}
two: {
option: {
// only picks the duration
pick: 'option.duration'
}
timeline: {
'50%': {
color: green
}
}
}
}
})
.test:
width: 200px
animations:
common:
option:
duration: 1s
direction: foward
one:
timeline:
50%:
background: green
two:
option:
# only picks the duration
pick: option.duration
timeline:
50%:
color: green
.test {
width: 200px;
animation-delay: 0s, 0s;
animation-name: one, two;
animation-duration: 1s, 1s;
animation-fill-mode: none, none;
animation-iteration-count: 1, 1;
animation-direction: foward, normal;
animation-play-state: running, running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
50% {
background: #008000;
}
}
@keyframes two {
50% {
color: #008000;
}
}
ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      option: {
        // only picks the duration
        pick: 'option.duration'
      }
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}
.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
    one:
      timeline:
        50%:
          background: green
    two:
      option:
        # only picks the duration
        pick: option.duration
      timeline:
        50%:
          color: green

Notes

Target

Description: A List value for the target option property in the common Object specifies specific animation instances to merge with.

Edit
ctr('.test', {
width: 200px
animations: {
common: {
option: {
duration: 1s
direction: 'foward'
// only merges with "two"
target: 'two'
}
}
one: {
timeline: {
'50%': {
background: green
}
}
}
two: {
timeline: {
'50%': {
color: green
}
}
}
}
})
.test:
width: 200px
animations:
common:
option:
duration: 1s
direction: foward
# only merges with "two"
target: two
one:
timeline:
50%:
background: green
two:
timeline:
50%:
color: green
.test {
width: 200px;
animation-delay: 0s, 0s;
animation-name: one, two;
animation-duration: 0.5s, 1s;
animation-fill-mode: none, none;
animation-iteration-count: 1, 1;
animation-direction: normal, foward;
animation-play-state: running, running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
50% {
background: #008000;
}
}
@keyframes two {
50% {
color: #008000;
}
}
ctr('.test', {
  width: 200px
  animations: {
    common: {
      option: {
        duration: 1s
        direction: 'foward'
        // only merges with "two"
        target: 'two'
      }
    }
    one: {
      timeline: {
        '50%': {
          background: green
        }
      }
    }
    two: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
  }
})
.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 0.5s, 1s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: normal, foward;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  50% {
    background: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}
.test:
  width: 200px
  animations:
    common:
      option:
        duration: 1s
        direction: foward
        # only merges with "two"
        target: two
    one:
      timeline:
        50%:
          background: green
    two:
      timeline:
        50%:
          color: green

Notes

True Value

Description: A true Boolean value for an Object animation instance inherits the common Object value.

Edit
ctr('.test', {
width: 200px
animations: {
common: {
timeline: {
'50%': {
color: green
}
}
}
one: {
option: {
duration: 1s
direction: 'foward'
}
timeline: {
'25%': {
background: green
}
}
}
// inherits common
two: true
}
})
.test:
width: 200px
animations:
common:
timeline:
50%:
color: green
one:
option:
duration: 1s
direction: foward
timeline:
25%:
background: green
# inherits common
two: true
.test {
width: 200px;
animation-delay: 0s, 0s;
animation-name: one, two;
animation-duration: 1s, 0.5s;
animation-fill-mode: none, none;
animation-iteration-count: 1, 1;
animation-direction: foward, normal;
animation-play-state: running, running;
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
25% {
background: #008000;
}
50% {
color: #008000;
}
}
@keyframes two {
50% {
color: #008000;
}
}
ctr('.test', {
  width: 200px
  animations: {
    common: {
      timeline: {
        '50%': {
          color: green
        }
      }
    }
    one: {
      option: {
        duration: 1s
        direction: 'foward'
      }
      timeline: {
        '25%': {
          background: green
        }
      }
    }
    // inherits common
    two: true
  }
})
.test {
  width: 200px;
  animation-delay: 0s, 0s;
  animation-name: one, two;
  animation-duration: 1s, 0.5s;
  animation-fill-mode: none, none;
  animation-iteration-count: 1, 1;
  animation-direction: foward, normal;
  animation-play-state: running, running;
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1), cubic-bezier(0.42, 0, 0.58, 1);
}
@keyframes one {
  25% {
    background: #008000;
  }
  50% {
    color: #008000;
  }
}
@keyframes two {
  50% {
    color: #008000;
  }
}
.test:
  width: 200px
  animations:
    common:
      timeline:
        50%:
          color: green
    one:
      option:
        duration: 1s
        direction: foward
      timeline:
        25%:
          background: green
    # inherits common
    two: true