[React Style] How To Use Keyframes?

Table of Contents

• Syntax
  • React Style
  • lazy keyframe
• W3C

Syntax

React Style

import { reactStyle } from 'react-atomic-molecule';

const Styles = { 
    loading: reactStyle({
        animation: ['spin 1s infinite linear']
    }), 
    spin: reactStyle([
        {   
            transform: ['rotateZ(0deg)']
        },  
        {   
            transform: ['rotateZ(360deg)']
        }   
    ],['@keyframes spin','0%','100%'])
};

lazy keyframe

https://codesandbox.io/s/lazyinject-keyframes-z5bb2

W3C

http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp