How to implement CSS FadeIn Animation using styled-components【React&CSS】

https://unsplash.com/photos/a-xbE4Tye5c

keyframes in styled-components

In conclusion, you can implement keyframes with almost the same description as pure CSS. (Keyframes import statement is required)

import styled, { keyframes } from 'styled-components';const fadeIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
const FadeIn = styled.div`
animation: ${fadeIn} .5s ease-in-out;
`;
<FadeIn>Fade in !!</FadeIn>

Ref

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
TiShow

TiShow

80% is the creation, the rest is depression. Frontend developer and data scientist, designer. Looking for Physics Ph.D Twitter: @_t_i_show