Style an HTML Element with Styled Component

Style a React Component with Styled Components



Creating Global Styles with Styled Components

Adjust Style based on props with Styled Components

Animate Styled Components in React

Create and use a Theme in Styled Components

Style pseudo-selectors and classes in Styled Components

Using the `css` prop to define styles in Styled Components

Using the `as` prop to reassign the HTML tag

Use the `attrs` method to add HTML attributes in styled-components

Use Styled Components with the Object syntax

Style a component based on complex props with Styled Components

Styling React Applications with Styled Components

We will be using the `keyframes` function from styled-components to animate the position and rotation of an `h1`.

Like styling using the global variable, we set the `keyframes` keyword to a variable and inside of the backticks, we set what we want our `element` to do. Then in a custom `element`, we set `animation` to our custom `keyframes` variable.

https://app.egghead.io/api/v1/lessons/javascript-animate-styled-components-in-react/subtitles

Sara Vieira: [0:01] Let's import keyframes from styled-components. We can import it like this and now to use it, to create animations with styled-components we say const and then move. That's the name of it, because I'm just going to move it.

[0:12] I'm going to say keyframes, open up the back ticks and then write an animation like I would in normal CSS. I can say from, and I'm going to say transform, and I'll say translateX. It starts at zero like this. I'm just going to copy this since it's easier than writing it, and I'm very lazy. I'm going to say two, and I'm going to say 100 percent, so that it goes from one side to the other.

[0:41] How do we use this? Obviously, it's not animating. I come here and I say animation, and the main difference is that you can't just type move, you have to interpolate it like so, so ${move}, then the duration, two seconds, the transitioning, so ease. Then I'm just going to say infinite because I wanted to run forever. If I do this, you can see that now we have this animation. You can also add a rotate, for example, so rotate. I'm going to start it at zero and say rotate. I'm going to start it at 45, and I have to put deg.

[1:15] Now it does this, which is terrible, but it is an animation. This is how you can animate the styled-components.

Animate Styled Components in React

Share this video with your friends

Course

Styling React Applications with Styled Components