New transform Syntax

HOW

  • transform의 신규 작성법을 알아보자.
  • 기존에 애니메이션의 키프레임에 transform을 적용하는 경우 transform에 작성된 요소를 지속적으로 반복을 해야만하였습니다.
    하지만, 신규 작성법을 사용하면 keyframe에 변경이 필요한 부분만 작업을 할 수 있습니다

기존 vs 신규

                            기존 작성 방법
                            .test_box{
                                transform : translate(50px, 50px) scale(0.8) rotate(45deg);
                            }

                            신규 작성 방법
                            .test_box{
                                translate: 50px 50px;
                                scale: 0.8;
                                rotate: 45deg;
                            }
                        

테스트 (기존)

테스트 (신규)