styled-components fadein 애니메이션 적용 관련

Question

동일한 모양의 요소를 시간 간격을 두고 순차적으로 나타나게 하고 싶습니다.아래처럼 delay를 설정한 후 실행해보니 처음에 4개가 먼저 보였다가 사라진 후에 애니메이션이 시작됩니다.처음에 보이지 않도록 적용하는 방법이 있을까요?(시작 시)(실행 중)import { styled, keyframes } from &#34;styled-components&#34; const fadein &#61; keyframes&#96; from { opacity: 0; } to { opacity: 1; } &#96; const Text &#61; styled.p&#96; font-size : 24px; animation : ${fadein} 4s; background-color : #000; color : #fff; top: 50%; padding : 10px 20px; &:first-chlid{ // animation-delay : 0s; } &:nth-child(2){ // animation-delay : 0.5s; } &:nth-child(3){ // animation-delay : 1s; } &:last-child{ // animation-delay : 1.5s; } &#96;

EmDev · Accepted Answer

몰랑토끼 · Answer

스타일드가 아니고 순수 css영역이라 css를 더 찾아보세요

shintwl · Answer

처음부터 opacity가 0이어야 할 듯해요지금은 1 (보임)에서 시작해서0 (안보임) 으로 갔다가 점차 1(보임)으로 가는거니까요

styled-components fadein 애니메이션 적용 관련

3개의 답변

#styled-components 목록