CODEWITHSUNDEEP
reactjscss-animationsanimate.cssstyled-components
Andrzej
Andrzej

Reputation: 571

Styled-components with animate.css

I use styled-components in my project. Now I would like to implement some simple animations like animate.css

Is that possible to use react-animations (or similar library) with styled-components ?

It's a waste of time to implements animations like in animate.css again. Additionally I don't want to install anothers package as Aphrodite because I have styled-components already.

Upvotes: 2

Views: 1866

Answers (1)

Andrzej
Andrzej

Reputation: 571

I've found an answer with code:

import React from 'react';
import styled, { keyframes } from 'styled-components';
import { fadeIn } from 'react-animations';

const fader = keyframes`${fadeIn}`;

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
  animation: 1s ${fader} alternate infinite;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;


export default () => {
  // Render these styled components like normal react components. They will pass on all props and work
  // like normal react components – except they're styled!
  return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

Upvotes: 2

Related Questions