Ju Yeong
131
2022-05-14 23:01:41
1
63

sass if 문 관련 질문.


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


이번에 사이트 모방해서 만들어볼까 하고 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번이 시작되지 않습니다. 어디서 잘못 된걸까요..?


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


0
  • 답변 1

  • kenu
    61k
    2022-05-15 03:55:09
    해당 게시물은 관리자에 의해 IT News & 정보에서 Tech Q&A로 이동 되었습니다.
  • 로그인을 하시면 답변을 등록할 수 있습니다.