How to use the radium.keyframes function in radium

"use babel";
// @flow

import * as React from "react";
import type { TaskState } from "../../TaskExecutionFeature/Types/types";
import DevToolCircle from "./DevToolCircle";
import Radium from "radium";
import electron from "electron";
import nullthrows from "nullthrows";

const remote = nullthrows(electron.remote);

let rippleAnimation = Radium.keyframes(
  {
    "0%": {
      transform: "scale(1)",
      background: "rgba(255,255,255,0)",
    },
    "50%": {
      background: "rgba(255,255,255,.2)",
    },
    "100%": {
      transform: "scale(30)",
      background: "rgba(255,255,255,0)",
    },
  },
  "ripple",
);

import Radium from 'radium'

const hoverAnimation = Radium.keyframes( {
    '0%': { backgroundColor: '#fff' },
    '100%': { backgroundColor: '#f6f8f8' }
} )

export const styles = {
    hover: {
        ':hover': {
            // Use a placeholder animation name in `animation`
            animation: '.5s linear',
            // Assign the result of `keyframes` to `animationName`
            animationName: hoverAnimation,

            backgroundColor: '#f6f8f8'
        }
    }
}

href={updateAmountLink}
              color="primary1"
              decoration="none"
              weight="regular"
              size="tiny"
            >
              {updateAmountTitle}
            
          
        )}
      
    )
  }
}

const garbageButtonKeyframes = Radium.keyframes({
  '0%': { opacity: 1 },
  '100%': { opacity: 0, height: 0 },
})

const cartRewardAnimationClass = {
  animation: 'x .4s cubic-bezier(.895, .03, .685, .22) forwards',
  animationName: garbageButtonKeyframes,
  pointerEvents: 'none',
  opacity: 1,
}

const borderWidth = 2

const styles = {
  card: {
    borderWidth: borderWidth,

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Radium, { keyframes } from 'radium';
import styles from '../../style/windows10';

var appear = keyframes({
  '0%': {
    opacity: 0
  },
  '29%': {
    opacity: 0,
    transform: 'translateY(9px)'
  },
  '30%': {
    opacity: .35,
    transform: 'translateY(9px)'
  },
  '100%': {
    opacity: 1,
    transform: 'translateY(0)'
  }
}, 'Title');

function getStyles() {
  const circleFadeDelay = Radium.keyframes({
    '0%, 39%, 100%': {
      opacity: 0
    },
    '40%': {
      opacity: 1
    }
  }, 'fade');

  const otherStyles = {
    wrapper: {
      width: '24px',
      height: '24px',
      position: 'relative',
      display: 'inline-block',
      verticalAlign: 'middle',
      marginRight: '10px'

const Radium = require('radium');
const {Component} = require('react');

@Radium
@PureRender
class Spinner extends Component {
  render(): any {
    return (
      <div style="{styles.root}">
        <div style="{styles.inner}">
      </div>
    );
  }
}

const pulseKeyframes = Radium.keyframes({
  '0%': {width: '10%'},
  '50%': {width: '50%'},
  '100%': {width: '10%'},
});

const styles = {
  root: {
    left: 0,
    position: 'fixed',
    top: 0,
    width: '100%',
    zIndex: 10000,
  },

  inner: {
    animation: pulseKeyframes + ' 3s ease 0s infinite',</div>

'use strict';

var Radium = require('radium');
var Util = require('./Util');
var toolbarHeight = '50px';

var closeWindowKeyframes = Radium.keyframes({
    '0%': { opacity: 1 },
    '100%': { opacity: 0 }
}, 'closeWindow');

var styles = {
    outer: {
        backgroundColor: 'rgba(0, 0, 0, 0.85)',
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 1000,
        width: '100%',
        height: '100%'
    },

function expand(s) {

  const offset = s * 2 + 'px';

  return Radium.keyframes({

    '0%': { transform: `scaleY(0) translate3d(0, 0, 0)` },
    '50%': { transform: `scaleY(0.25) translate3d(0, ${offset}, 0)` },
    '100%': { transform: `scaleY(1) translate3d(0, 0, 0)` }

  });

}

setVisibleReplies: func.isRequired,
  setBadgeGrantee: func.isRequired,
  banNametag: func.isRequired,
  acceptBadge: func.isRequired,
  toggleNametagImageMenu: func.isRequired,
  showNametagImageMenu: bool.isRequired
}

export default radium(Room)

const slideOut = keyframes({
  '0%': {left: -260},
  '100%': {left: 0}
}, 'slideOut')

const slideIn = keyframes({
  '0%': {left: 0},
  '100%': {left: -260}
}, 'slideIn')

const styles = {
  bodyStyle: {
    overflowY: 'auto'
  },
  roomContainer: {
    overflowX: 'hidden'
  },
  appBar: {
    position: 'fixed',
    boxShadow: 'none',
    fontWeight: 300,
    height: 85