Usage

Description: Predefined state transitions can be declared in the state Object using the preset key with a String value that corresponds to the preset list below.

Edit
ctr('.test', {
width: 200px
height: 200px
background: teal
hover: {
preset: 'sink'
}
})
.test:
width: 200px
height: 200px
background: teal
hover:
preset: sink
.test {
width: 200px;
height: 200px;
background: #008080;
}
.test:hover {
transition-delay: 0s;
display: inline-block;
vertical-align: middle;
transition-duration: 0.3s;
transform: translateY(8px);
backface-visibility: hidden;
transition-property: transform;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 0 1px rgba(0,0,0,0);
transition-timing-function: ease-out;
}
.test:not(:hover) {
transition-delay: 0s;
display: inline-block;
vertical-align: middle;
transform: translateZ(0);
transition-duration: 0.3s;
backface-visibility: hidden;
transition-property: transform;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 0 1px rgba(0,0,0,0);
transition-timing-function: ease-out;
}
ctr('.test', {
  width: 200px
  height: 200px
  background: teal
  hover: {
    preset: 'sink'
  }
})
.test {
  width: 200px;
  height: 200px;
  background: #008080;
}
.test:hover {
  transition-delay: 0s;
  display: inline-block;
  vertical-align: middle;
  transition-duration: 0.3s;
  transform: translateY(8px);
  backface-visibility: hidden;
  transition-property: transform;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-timing-function: ease-out;
}
.test:not(:hover) {
  transition-delay: 0s;
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  transition-duration: 0.3s;
  backface-visibility: hidden;
  transition-property: transform;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-timing-function: ease-out;
}
.test:
  width: 200px
  height: 200px
  background: teal
  hover:
    preset: sink

Notes

Preset List

bob bounceIn bounceOut buzz
buzzOut float grow growRotate
hang pop pulse pulseGrow
pulseShrink push rotate shrink
sink skew skewBackward skewFoward
wobbleBottom wobbleHorizontal wobbleSkew wobbleToBottomRight
wobbleToTopRight wobbleTop wobbleVertical

Modify

Description: Any preset option or value can be altered or extended, although, to do so, the preset must be defined in the common Object.

Edit
ctr('.test', {
width: 200px
height: 200px
background: teal
hover: {
common: {
option: {
duration: 1s
}
preset: 'sink'
}
on: {
opacity: 1
transform: translateY(15px)
}
non: {
opacity: 0.5
}
}
})
.test:
width: 200px
height: 200px
background: teal
hover:
common:
option:
duration: 1s
preset: sink
on:
opacity: 1
transform: translateY(15px)
non:
opacity: 0.5
.test {
width: 200px;
height: 200px;
background: #008080;
}
.test:hover {
opacity: 1;
display: inline-block;
vertical-align: middle;
transition-delay: 0s, 0s;
backface-visibility: hidden;
transform: translateY(15px);
transition-duration: 0.3s, 1s;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 0 1px rgba(0,0,0,0);
transition-property: transform, opacity;
transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
opacity: 0.5;
display: inline-block;
vertical-align: middle;
transition-delay: 0s, 0s;
transform: translateZ(0);
backface-visibility: hidden;
transition-duration: 0.3s, 1s;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0 0 1px rgba(0,0,0,0);
transition-property: transform, opacity;
transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
ctr('.test', {
  width: 200px
  height: 200px
  background: teal
  hover: {
    common: {
      option: {
        duration: 1s
      }
      preset: 'sink'
    }
    on: {
      opacity: 1
      transform: translateY(15px)
    }
    non: {
      opacity: 0.5
    }
  }
})
.test {
  width: 200px;
  height: 200px;
  background: #008080;
}
.test:hover {
  opacity: 1;
  display: inline-block;
  vertical-align: middle;
  transition-delay: 0s, 0s;
  backface-visibility: hidden;
  transform: translateY(15px);
  transition-duration: 0.3s, 1s;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-property: transform, opacity;
  transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) {
  opacity: 0.5;
  display: inline-block;
  vertical-align: middle;
  transition-delay: 0s, 0s;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition-duration: 0.3s, 1s;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 0 1px rgba(0,0,0,0);
  transition-property: transform, opacity;
  transition-timing-function: ease-out, cubic-bezier(0.42, 0, 0.58, 1);
}
.test:
  width: 200px
  height: 200px
  background: teal
  hover:
    common:
      option:
        duration: 1s
      preset: sink
    on:
      opacity: 1
      transform: translateY(15px)
    non:
      opacity: 0.5

Notes