Styled Components AnimateCSS

Extract and convert keyframes from animate.css into a JavaScript module that can be imported and used with styled-components.

Installation

npm install styled-components-animatecss

Usage

import styled, { keyframes } from "styled-components";
import { bounce } from "styled-components-animatecss";

const App = () => {
  return (
    <div>
      <Ball />
    </div>
  );
};

const Ball = styled.div`
  animation: ${bounce} 2s infinite;
`;

Advantages Over Importing animate.css Directly

• Tree Shaking
• Code Reusability
• Consistency
• Maintainability
• Integration with styled-components