Animation Maps

Keyfram's mixins all accept a common map format referred to as the animation map. The idea behind the animation map format is that you can represent any animation as a nested SCSS map specifying timings, elements, and properties as keys of the map. Two styles of maps are valid with all mixins:

1. Implicit Selector Format

If you are only interested in animating a single selector (or element), just specify a 2-level SCSS map with just properties and then timings as map keys. When unspecified, the selector to animate is implied to be the selector from where the mixin is called from:

.single-selector div {
  $animation-map: (
    margin-left: (0ms: 0%, 3000ms: 100%)
  );

  @include kf($animation-map);
}

.single-selector {
  height: 20px;
  position: relative;

  div {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid black;
  }
}

<div class='single-selector'>
  <div></div>
</div>

2. Multiple Selectors Format

Often animations don't just involve a single element but rather need to be synchronized over multiple selectors. For this case, specify a 3-level map with selectors, properties, and timings as map keys:

.multiple-selectors {
  $animation-map: (
    '.a': (margin-left: (0ms: 0%, 3000ms: 100%)),
    '.b': (margin-left: (0ms: 100%, 2000ms: 0%))
  );

  @include kf($animation-map);
}

.multiple-selectors {
  height: 20px;
  position: relative;

  div {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid black;
  }
}

<div class='multiple-selectors'>
  <div class='a'></div>
  <div class='b'></div>
</div>