CSS Animations with Styled Components

Animations with @keyframes

Styled components are visual primitives to style your React App and have plenty of great features, like the ability to write CSS right in the component, complexity reduction, faster loading, clear scope and other performance improvements.

This article is about CSS animations with the @keyframes property. CSS animations with @keyframes aren't scoped to a single component, but you still don't want them to be global to avoid name collisions.

Styled components export a helper for dealing with CSS keyframes, which generates a uniques instance that can be used throughout the entire application.

We have to create the keyframes.

Create a component, that will rotate everything we pass in over two seconds

Then we return the styled component.

Keyframes are lazily injected when they’re used. Hence, keyframes can take advantage of code-splitting, though you have to use the css helper for shared style fragments, see example from official docs.

Let’s have a look at a concrete example for animation with keyframes. We want to make a beating heart animation.

We adapt the CSS for styled-components:

We create the keyframes for the animation:

We add the animation property to our styled Heart and voila. We have a beating heart.

CSS animations with keyframes can be easily done with styled-components and the helper utility keyframes. The code is cleaner, not scattered around the application and more performant than other CSS solutions.

References (and Big thanks):

Related posts:

One of the hottest concepts in marketing today is the integrated marketing strategy. Everyone is talking about it, but few actually know what it is. In the days when the search engine was starting to…

If you want to grow your online business in today’s world, then the most important thing is to get traffic on your website. Many people think about getting traffic on the website, so to make things…

Change detection is a core concept in Angular that is responsible for keeping the view in sync with the application state. In this blog, we will explore the basics of change detection and provide…