CSS transition로 웹 애니메이션 효과 주기

 <style>
        .outside{
            position: relative;
            background-color: blueviolet;
            width: 100px;
            font-size: 0.8em;
            color: #ffffff;
            left: 100px;
            top : 100px;
            transform: scale(1);
            transition: all 2s;
        }
    </style>

var base = document.querySelector(".outside");
base.style.transform = "scale(2)";
base.style.left = "300px";

 

transittion, transform 속성의 변화를 주어 변경한다.

 

CSS로 transform 효과 주는게 자바스크립트보다 더 빠르고 좋다

 

네이버나 구글에서는 애니메이션 효과를 어떻게 주는지 훔쳐보도록 하자