순서대로 등장하는 animation 만드는 CSS

 

:is 를 통해서 여러개에 동일한 명령어를 지정할 수 있다. 

 

순서대로 등장하기 위해서 animation-delay값에 조금씩 차이를 주었다. 사실 10개 정도라서 그냥 하드코딩했는데, 만약 수십개 이상이라면 for문을 사용해서 스타일링할 수 있는 것인지, 거기까지는 시도해보지 않아서 모르겠다 ^^; 부디 그럴 일이 없기를.

 

animation-fill-mode는 애니메이션이 수행된 다음에 어떻게 변화하는 지를 나타내는 것인데, 이번 경우에는 등장한 이후에 다시 사라지지 않는 것이 요건이었기 때문에 "both" 혹은 "forwards" 값으로 설정하였다.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

const styled from '@emotion/styled';

const DELAY = 0.5;
const TableBody = styled.div`
    display: grid;
    opacity: 0;

    :is(.on-0, .on-1, .on-2, .on-3, .on-4, .on-5, .on-6, .on-7, .on-8, .on-9, .on-10) {
        animation: showUp 1s;
        animation-fill-mode: both;
    }
    &.on-0 {
        animation-delay: ${0.1}s;
    }
    &.on-1 {
        animation-delay: ${DELAY*1}s;
    }
    &.on-2 {
        animation-delay: ${DELAY*2}s;
    }
    &.on-3 {
        animation-delay: ${DELAY*3}s;
    }
    &.on-4 {
        animation-delay: ${DELAY*4}s;
    }
    &.on-5 {
        animation-delay: ${DELAY*5}s;
    }
    &.on-6 {
        animation-delay: ${DELAY*6}s;
    }
    &.on-7 {
        animation-delay: ${DELAY*7}s;
    }
    &.on-8 {
        animation-delay: ${DELAY*8}s;
    }
    &.on-9 {
        animation-delay: ${DELAY*9}s;
    }
    &.on-10 {
        animation-delay: ${DELAY*10}s;
    }

    @keyframes showUp {
        from {
            opacity: 0;
            color: transparent;
        }
        to {
            opacity: 1;
            color: black;
        }
    }
`;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

import classNames from 'classNames';


....

return (

...

    data.map((row:any, index:number) => (
        <TableBody 
            key={index} 
            className={classNames({[`on-${index+1}`]: true})} 
        >
            {row.text}
        </TableBody>
    ))

)