keyshond

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

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

• API

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

• AnimationEffectTimingProperties(MDN)
• W3C Draft)
• CSS animation (W3C)
• web-animations

Naming

@keyframes + keeshond

Related project

• keyframe-transpose
  • keysond internal library for convert Element.animate like keyframe Object
• css-keyframe-animatable
  • keysond internal library for convert CSS @keyfrmaes like Object