How to make top to bottom animation with react styled components - css

Question

I'm trying to recreate the slider on Gatsby's website but using the styled components library instead of the emotion library they used. The issue is the animation doesn't do anything and the list of strings I pass into the component get concatenated together.
Gatsbyjs.org
Code for their slider component
My slider.js:
import React from "react"
import styled, { keyframes } from "styled-components"
const topToBottom = keyframes`
0%: {
opacity: 0;
}
6%: {
opacity: 0;
transform: translateY(-30px);
}
10%: {
opacity: 1;
transform: translateY(0px);
}
25%: {
opacity: 1;
transform: translateY(0px);
}
29%: {
opacity: 0;
transform: translateY(30px);
}
80%: {
opacity: 0;
}
100%: {
opacity: 0;
}
`;
const SliderDiv = styled.div`
display: inline;
& span: {
animation: ${topToBottom} 10s linear infinite 0s;
opacity: 0;
position: absolute;
:nth-child(2) {
animation-delay: 2.5s;
}
:nth-child(3) {
animation-delay: 5s;
}
:nth-child(4) {
animation-delay: 7.5s;
}
}
`;
const Slider = ({ items, color }) => (
<SliderDiv>
{items.map(item => (
<span key={item} css={{ color }}>
{item}
</span>
))}
</SliderDiv>
)
export default Slider
Result:

Answer 1

Your code works as expected if you remove the : from the css code inside the Styled Component:
span {
// not
span : {
and
0% {
// not
0% : {
I've tested the code in a Codesandbox
import React from "react";
import styled, { keyframes } from "styled-components";
const topToBottom = keyframes`
0% {
opacity: 0;
}
6% {
opacity: 0;
transform: translateY(-30px);
}
10% {
opacity: 1;
transform: translateY(0px);
}
25% {
opacity: 1;
transform: translateY(0px);
}
29% {
opacity: 0;
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
`;
const SliderDiv = styled.div`
display: inline;
& span {
animation: ${topToBottom} 10s linear infinite 0s;
opacity: 0;
position: absolute;
:nth-child(2) {
animation-delay: 2.5s;
}
:nth-child(3) {
animation-delay: 5s;
}
:nth-child(4) {
animation-delay: 7.5s;
}
}
`;
const Slider = ({ items, color }) => (
<SliderDiv>
{items.map(item => (
<span key={item} css={{ color }}>
{item}
</span>
))}
</SliderDiv>
);
export default Slider;
I know I looked for this errors a couple of times :)
To make it more clear, in styled-components you write css, not css-in-js
Hope it helps!