[CSS] transform- transition🥇 vs margin

Transition🥇 vs Margin

 ☑️ 버벅이지 않는 부드러운 애니메이션 구현 👉🏻 CSS transform 사용

 

• transform은 레이아웃을 위치와 크기를 결정하고 난 뒤에 적용한다.
• transform은 주변의 요소에 영향을 미치지 않고, 자기 자신만 변한다.

 

☑️ transform을 가지고 transition을 넣었을 때 vs margin을 가지고 transition을 넣었을 때

 

• transition에는 연속적으로 변할 수 있는 어떤 값이라도 넣어도 된다. 숫자 값이면 다 가능하기 때문에 transform, margin 둘 다 사용 가능하다.
• 하지만 애니메니션 효과에 margin 같은 속성을 넣은 건 정말 어쩔 수 없는 상황이 아니라면 하지 않는 것이 좋다.
• 움직일 일이 있다면 가능하면 transform만 사용

 
 

☑️ 둘은 동작 자체도 서로 다르게 움직인다.

 

• margin 같은 경우에는 웹에서 Layout(좌표, 크기)을 결정하기 때문에 주변 다른 요소에 모두 영향을 미친다. 
• transform은 주변의 다른 요소에 영향을 미치지 않고, 자기 자신만 변한다. 훨씬 계산할 부분이 적다.
• 무언가 위치나 크기를 변경할 때 가벼운 속성으로 transform을 사용하는 것이 좋다.

 
 
💡성능에도 안좋은 영향

만약에 다른 요소들에도 영향을 준다면 그건 레이아웃을 변경하는 작업이고, 상당히 무거운 작업이다. 일반적으로 특히 모바일 웹 환경을 고려했을 때 애니메이션이 레이아웃 계산을 요구하는지 아닌지에 따라서 성능이 크게 차이가 난다. 애니메이션을 주고자하는 속성이 값이 바뀔 때 다른 요소들에도 영향을 준다면 그건 레이아웃을 변경하는 작업이고,  margin 뿐만 아니라 크기값인 width, height를 생각해볼 수 있다.  이것들은 다른 요소에도 영향을 주기 때문에 좋지 않다.

 

/* transform으로 움직일 때 */
.blue {
background-color: blue;
transition: transform 0.5s;
}

.blue:hover {
transform: translate(20px, 20px);
}

/* margin으로 움직일 때 */
.red {
background-color: red;
transition: margin 0.5s;
}

.red:hover {
margin-top: 30px;
margin-left: 30px;
}

 

📕참고 : https://youtu.be/PdHa_m5Q_Ds?si=uLj12qAkvq-PTUdR