Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including kf-sass with all npm packages installed. Try it out:

kf-sass lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("kf-sass/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

kf-sass v1.0.1

Kf - Sass Keyframe Animation Library

Kf is a SCSS library which makes composing CSS keyframe-based animations simple.

Demo Animation as a GIF

A single @import away; Kf lets you define animations in a simple SCSS map format and then modify and compose your animations together using a collection of self-explanatory mixins. Kf takes care of the laborious work of translating your animation into CSS keyframes, freeing you up to focus on your animation itself.

You can use Kf for creating anything from simple button hovers to intricately timed and sequenced animations spanning over multiple elements (once only thought feasible by using javascript). Install via NPM or get the single-file import to get started.

Live demos available at:

Overview of Kf

  • Modular / composition-focused SCSS animation library
  • Available as a single SCSS file @import (no dependencies)
  • Great and simple for quickly for creating animations
  • Documented through examples at kf-sass.com
  • Well-thought out design (mixin-composability, animation-map flexibility etc.)
  • Small readable source-code & plently of unit tests

Installation & Basic Usage

Grab the single-file distribution release or install via NPM:

npm install --save kf-sass

Next, include in your SCSS file:

@import 'relative/path-to/kf.scss';

From here the most basic example would look like:

.sliding-box {
  $animation-map: ('div': ( margin-left: ( 0ms: 0%, 300ms: 30%, 2000ms: 100% ) ));
  @include kf($animation-map);
}

Documentation

Learn more at the documentation site.

Available Mixins:

MixinPurpose
kfGenerate animation keyframes from an animation map.
kf-chainRun multiple animations in order sequentially
kf-easeApply easing to an animation
kf-lagAdd lag time at the end of an animation
kf-leadAdd lead time before the start of an animation
kf-loopLoop an animation a given number of times
kf-mirrorRun an animation sequentially forward and then in reverse
kf-parallelRun multiple animations in parallel
kf-reverseRun an animation in reverse
kf-sleepAdd sleep (do nothing) time to an animation within a kf-chain
kf-staggerRun multiple animations sequentially staggering the start time of each
kf-stretchStretch an animation's timing values over a given time or by a multiplier
kf-debugVisually debug an animation

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free