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 keyshond with all npm packages installed. Try it out:

var keyshond = require("keyshond")

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

keyshond v1.0.1

CSS in JS friendly animation helper support Element.animate() object and CSS @keyframes

keyshond

CSS in JS friendly animation helper support Element.animate() object and CSS @keyframes

npm JavaScript Style Guide Build Status codecov

Install

$ npm install keyshond

Usage

import { animate } from 'keyshond'
// or commonjs
// const animate = require('keyshond').animate

const output = animate({
  opacity: [0.5, 1],
  transform: ['scale(0.5)', 'scale(1)'],
}, {
  duration: 500,
  iterations: Infinity,
  direction: 'alternate',
})

Output:

{
  'animationName': {
    '0%': {
      'opacity': 0.5,
      'transform': 'scale(0.5)'
    },
    '100%': {
      'opacity': 1,
      'transform': 'scale(1)'
    }
  },
  'animationTimingFunction': 'linear',
  'animationDirection': 'alternate',
  'animationDuration': '500ms',
  'animationIterationCount': 'infinite'
}

Documents

Example

keyshond-examples

with aphrodite (most easily)

import { StyleSheet, css } from 'aphrodite'
import { animate } from 'keyshond'

const style = StyleSheet.create({
  item: animate(keyframeInput, keyframeOption)
})

const AnimateItem = () => {
  return <div className={css(style.item)}>Hello</div>
}

with free-style

import FreeStyle from 'free-style'
import { animate } from 'keyshond'

const Style = FreeStyle.create()
const props = animate(keyframeInput, keyframeOption, {
  generateAnimationName: (keyframes) => Style.registerKeyframes(keyframes)
})

const STYLE = Style.registerStyle(props)

Style.inject()

const AnimateItem = () => {
  return <div className={STYLE}>Hello</div>
}

with Radium

import { animate } from 'keyshond'
import Radium, { StyleRoot } from 'radium'

const style = {
  item: animate(keyframeInput, keyframeOption, {
    generateAnimationName: (keyframes) => Radium.keyframes(keyframes, "my-animation")
  })
}

let Item = React.createClass({
  render(){
    return <div style={[style.item]}>Radium Example</div>
  }
})
Item = Radium(Item)

const AnimateItem = () => {
  return <StyleRoot><Item/></StyleRoot>
}

with jss

import { animate } from 'keyshond'

import jss from 'jss'
import jssPreset from 'jss-preset-default'

jss.setup(jssPreset())

const { animationName, ...animationEffects } = animate(keyframeInput, keyframeOption)
const ruleName = `my-jss-animation`
// If you register multiple animation, you need change ruleName like `my-jss-animation-{$unique}`

const style = {
  [`@keyframes ${ruleName}`] : animationName,
  item: Object.assign({}, animationEffects, {
    animationName: ruleName
  })
}
const {classes} = jss.createStyleSheet(style).attach()

const AnimateItem = () => {
  return <div className={STYLE}>Hello</div>
}

Reference

Naming

@keyframes + keeshond

Related project

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