{"id":15041311,"url":"https://github.com/mil/keyfram","last_synced_at":"2025-04-14T20:15:35.777Z","repository":{"id":44164701,"uuid":"149804067","full_name":"mil/keyfram","owner":"mil","description":"Modular Sass animation library that makes compsing complex animations simple.","archived":false,"fork":false,"pushed_at":"2022-12-08T04:54:15.000Z","size":328,"stargazers_count":14,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T20:09:26.692Z","etag":null,"topics":["animation","css","design","keyframes","prototyping","sass","sass-framework","sass-library"],"latest_commit_sha":null,"homepage":"http://kf-sass.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mil.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-21T18:44:18.000Z","updated_at":"2024-11-11T13:07:46.000Z","dependencies_parsed_at":"2023-01-24T22:30:09.321Z","dependency_job_id":null,"html_url":"https://github.com/mil/keyfram","commit_stats":null,"previous_names":["mil/kf-sass"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mil%2Fkeyfram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mil%2Fkeyfram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mil%2Fkeyfram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mil%2Fkeyfram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mil","download_url":"https://codeload.github.com/mil/keyfram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248774981,"owners_count":21159534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","css","design","keyframes","prototyping","sass","sass-framework","sass-library"],"created_at":"2024-09-24T20:45:56.392Z","updated_at":"2025-04-14T20:15:35.753Z","avatar_url":"https://github.com/mil.png","language":"CSS","readme":"# Keyfram - Sass Keyframe Animation Library [![Build Status](https://travis-ci.org/mil/kf-sass.svg?branch=master)](https://travis-ci.org/mil/keyfram)\n\n**Keyfram** is a SCSS library which makes composing CSS keyframe-based animations simple.\n\n[![Demo Animation as a GIF](scss/resource/demo_animation.gif)](keyfram.milesalan.com)\n\nA single `@import` away; Keyfram lets you define animations in a simple [SCSS map format](http://keyfram.milesalan.com/guide/animation-maps/) and then modify and compose your animations together using a collection of self-explanatory [mixins](http://keyfram.milesalan.com/mixins). Keyfram takes care of the laborious work of translating your animation into CSS keyframes, freeing you up to focus on your animation itself.\n\nYou can use Keyfram 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](https://www.npmjs.com/package/kf-sass) or get the [single-file import](https://raw.githubusercontent.com/mil/keyfram/master/dist/kf-1.0.0.scss) to get started.\n\n**Live demos available at:**\n- [Documentation site](http://keyfram.milesalan.com)\n\n## Overview of Keyfram\n- Modular / composition-focused SCSS animation library\n- Available as a [single SCSS file](https://raw.githubusercontent.com/mil/keyfram/master/dist/kf-1.0.0.scss) `@import` (no dependencies)\n- Great and simple for quickly for creating animations\n- Documented through examples at [keyfram.milesalan.com](http://keyfram.milesalan.com)\n- Well-thought out design (mixin-composability, animation-map flexibility etc.)\n- Small readable source-code \u0026 plently of [unit tests](/test)\n\n## Installation \u0026 Basic Usage\nGrab the [single-file release](https://raw.githubusercontent.com/mil/keyfram/master/dist/kf-1.0.0.scss) or install via NPM:\n```bash\nnpm install --save kf-sass\n```\n\nNext, include in your SCSS file:\n```scss\n@import 'relative/path-to/kf.scss';\n```\n\nFrom here the most basic example would look like:\n```scss\n.sliding-box {\n  $animation-map: ('div': ( margin-left: ( 0ms: 0%, 300ms: 30%, 2000ms: 100% ) ));\n  @include kf($animation-map);\n}\n```\n\n\n## Documentation\nLearn more at the [documentation site](http://keyfram.milesalan.com).\n\n**Available Mixins:**\n\n| Mixin                                                          | Purpose                                                                  |\n| -                                                              | -                                                                        |\n| [kf](http://keyfram.milesalan.com/mixins/kf)                   | Generate animation keyframes from an animation map.                      |\n| [kf-chain](http://keyfram.milesalan.com/mixins/kf-chain)       | Run multiple animations in order sequentially                            |\n| [kf-ease](http://keyfram.milesalan.com/mixins/kf-ease)         | Apply easing to an animation                                             | \n| [kf-lag](http://keyfram.milesalan.com/mixins/kf-lag)           | Add lag time at the end of an animation                                  |\n| [kf-lead](http://keyfram.milesalan.com/mixins/kf-lead)         | Add lead time before the start of an animation                           |\n| [kf-loop](http://keyfram.milesalan.com/mixins/kf-loop)         | Loop an animation a given number of times                                |\n| [kf-mirror](http://keyfram.milesalan.com/mixins/kf-mirror)     | Run an animation sequentially forward and then in reverse                |\n| [kf-parallel](http://keyfram.milesalan.com/mixins/kf-parallel) | Run multiple animations in parallel                                      |\n| [kf-reverse](http://keyfram.milesalan.com/mixins/kf-reverse)   | Run an animation in reverse                                              |\n| [kf-sleep](http://keyfram.milesalan.com/mixins/kf-sleep)       | Add sleep (do nothing) time to an animation within a kf-chain            |\n| [kf-stagger](http://keyfram.milesalan.com/mixins/kf-stagger)   | Run multiple animations sequentially staggering the start time of each   |\n| [kf-stretch](http://keyfram.milesalan.com/mixins/kf-stretch)   | Stretch an animation's timing values over a given time or by a multiplier|\n| [kf-debug](http://keyfram.milesalan.com/mixins/kf-debug)       | Visually debug an animation                                              |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmil%2Fkeyfram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmil%2Fkeyfram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmil%2Fkeyfram/lists"}