6.

 

1. Transition

Transition : 웹 애니메이션을 설정할 수 있다!

JS에서도 설정할 수 있지만 css에서 구체적인 설정을 하는 것이 편함.

.box {
  width:100px;height:100px;
  background-color:slategray;
  color:#fff;
  text-align:center;
  line-height:100px;
  transition:all 1s ease-in;
}

 

var box = document.querySelector(".box");
box.addEventListener("click",function(evt){
  evt.target.style.height="200px";
  evt.target.style.width="200px";
});

 

 

2. Transform

translate: GPU 연산을 이용하여 빠르게 처리할 수 있다.

모바일 웹브라우저에서는 translate3d를 많이 사용한다!(완전 빠름)!

네이버 모바일 웹브라우저에서 translate3d를 사용하여 스와이핑을 한다.

.wrap {
  position:relative;
  transform:translate3d(10px,0,0)
}

.box{
  background-color:gray;
  width:100px; height:100px;
  color:#fff;
  text-align:center;
  line-height:100px;
  position:absolute;
}

.box:nth-child(2){
  background-color:red;
  transform:rotate(10deg);
  left:100px;
}

.box:nth-child(3){
  left:200px;
  transform:translateX(20px)
}

 

 

ref)

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

CSS 트랜지션 사용하기