안녕하세요. 최근 프론트앤드 공부 중인 사람입니다.

이번에 사이트 모방해서 만들어볼까 하고 nexon 페이지를 만들어 보려는데 난관에 부딪혔습니다.

이런 광고 박스를 만들었고 광고 박스가 6초 동안 하나씩 파랑색으로 체워지고 하나가 파랑색이 100%로 채워지면 다음 것이 다시 파랑색으로 채워지기 시작하는 형식을 만들고 있는데

제가 sass에 만든 파랑색 에니메이션 코드가 이렇습니다.

 .ad_blueContainer1 {

                background-color: rgb(10, 59, 151);

                height: 100%;

                animation-duration:6s;

                animation-name: ad_blueContainer1;

                width: $blC1;

                @keyframes ad_blueContainer1 {

                    0% {$blC1: 0;}

                    100% {$blC1: 100%;}

                }

            }

            .ad_blueContainer2 {

                background-color: rgb(10, 59, 151);

                height: 100%;

                animation-duration:6s;

                animation-name: ad_blueContainer2;

                width: $blC2;

                @if ($blC1 = 100%) {

                    @keyframes ad_blueContainer2 {

                        0% {$blC2: 0;}

                        100% {$blC2: 100%;}

                    }

                }

            }

 .ad_blueContainer1 의 width 가 애니메이션으로 100% 차면 .ad_blueContainer2 의  애니메이션이 시작되야 하는데, 1번 애니메이션이 끝나도 2번이 시작되지 않습니다. 어디서 잘못 된걸까요..?

아니면 이렇게 만드는 것이 아닌가요 ㅠㅠ?