Skip to content
CSS in JS friendly animation helper for convert Element.animate() object
JavaScript
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.
docs
src
test
.babelrc
.eslintrc.js
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
codecov.yml
package.json
yarn.lock

README.md

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

You can’t perform that action at this time.