Guide

Easing Animations

Keyfram supports easing animations using standard CSS easing functions such as ease-in and additionally cubic bezier definitions such as cubic-bezier(0,1,1,0). By default if easing is unset, Keyfram will use linear easing for all animations.

You can ease animations both on a per-animation or per-transition level. Notice below, in the first example using kf-ease, ease-in-out is applied to the sliding box transition in both directions, however in the second example since per-transition easing is used, the ease-in-out easing in only applied to the sliding box on the first transition.

Per-Animation Easing

Per-animations easing can be set using the kf-ease mixin. This mixin takes an existing animation map and applies the specified easing to all transitions in the animation:

.kf-ease-example {
  $animation-map: (
    'div': (margin-left: (0ms: 0, 1000ms: 100%, 2000ms: 0%))
  );

  @include kf-ease(ease-in-out, $animation-map);
}

.kf-ease-example {
  height: 20px;
  width: 100%;
  position: relative;

  $size: 20px;

  div {
    position: absolute;
    left: 0;
    top: 0;
    background: #888888;
    width: $size;
    height: $size;
    border: 1px solid #e8e8e8;
  }
}

<div class='kf-ease-example'>
  <div></div>
</div>

Edit

Per-Transition Easing

For more granular control over individual transitions easing, instead of specifying just values in a animation map you can specify a list of 2 elements, target value and then easing, to transition to:

.per-transition-easing {
  $animation-map: (
    'div': ( 
      margin-left: (
        0ms: 0, 
        1000ms: (100%, ease-in-out), 
        2000ms: (0%, linear)
      )
    )
  );
  @include kf($animation-map);
}

.per-transition-easing {
  height: 20px;
  width: 100%;
  position: relative;

  $size: 20px;

  div {
    position: absolute;
    left: 0;
    top: 0;
    background: #888888;
    width: $size;
    height: $size;
    border: 1px solid #e8e8e8;
  }
}

<div class='per-transition-easing'>
  <div></div>
</div>

Edit

Using Mixins

Pipeline Functions