CODEWITHSUNDEEP
cssreactjs
kjonsson
kjonsson

Reputation: 2799

Using CSS animations in React.js

I've been working with React for a little while but animations is one thing that is confusing me.

Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.

My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?

Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?

Upvotes: 3

Views: 686

Answers (1)

Chris
Chris

Reputation: 59541

You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.

The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.

CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.

So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.

Upvotes: 2

Related Questions