Sass library which makes composing CSS keyframe-based animations simple
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Kf release version 1.0.0 Nov 9, 2018
scss Kf release version 1.0.0 Nov 9, 2018
test Fix _generate-debugger-animation unit test Nov 9, 2018
.gitignore
.travis.yml Nodejs 6 for travis Nov 9, 2018
ADVANCED.md Kf release version 1.0.0 Nov 9, 2018
CHANGELOG.md Bump version; add changelog Nov 9, 2018
LICENSE Kf release version 1.0.0 Nov 9, 2018
README.md Link to single-file release in install section of README Nov 9, 2018
_index.scss Kf release version 1.0.0 Nov 9, 2018
package-lock.json
package.json Bump version; add changelog Nov 9, 2018

README.md

Kf - Sass Keyframe Animation Library Build Status

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 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:

Mixin Purpose
kf Generate animation keyframes from an animation map.
kf-chain Run multiple animations in order sequentially
kf-ease Apply easing to an animation
kf-lag Add lag time at the end of an animation
kf-lead Add lead time before the start of an animation
kf-loop Loop an animation a given number of times
kf-mirror Run an animation sequentially forward and then in reverse
kf-parallel Run multiple animations in parallel
kf-reverse Run an animation in reverse
kf-sleep Add sleep (do nothing) time to an animation within a kf-chain
kf-stagger Run multiple animations sequentially staggering the start time of each
kf-stretch Stretch an animation's timing values over a given time or by a multiplier
kf-debug Visually debug an animation