Как сделать анимацию сверху вниз с реагирующими элементами

Question

Я пытаюсь воссоздать слайдер на веб-сайте Гэтсби, но использую библиотеку стилизованных компонентов вместо библиотеки эмоций, которую они использовали. Проблема в том, что анимация ничего не делает, и список строк, которые я передаю в компонент, объединяется вместе.

https://www.gatsbyjs.org/

Код для их слайдера

Мой 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

Результат:

Answer 1

Ваш код работает должным образом, если вы удалите : из кода CSS внутри стилизованного компонента:

span {
// not
span : {

а также

0% {
// not
0% : {

Я проверил код в 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;

Я знаю, что искал эту ошибку пару раз:)

Чтобы сделать это более понятным, в styled-components ты пишешь css не css-in-js

Надеюсь, поможет!