CSS 고급 - transition

< CSS 고급 - transition >

 - javascript 박스 size 늘리는 code

HTML

<div class="box">

CSS

.box {

 width : 100px;

 height : 100px;

}

JavaScript

var box = document.querySelector(".box");

box.addEventListener("click", function(evt){

  evt.target.style.height = "200px";

  evt.target.style.width = "200px";

});

 - transition 효과를 주면 위의 javascript 효과가 적용되는 동안 애니메이션이 적용됨.

CSS

.box {

 width : 100px;

 height : 100px;

trnasition : height 2s, width 2s; (각 css 속성별 적용시간을 설정)

trnasition : all 1s; (모든 css 속성을 1초에 적용)

trnasition : all 1s ease-in; (나중 속도를 더 빠르게)

}

 - 참고 사이트 : https://developer.mozilla.org/en-US/docs/Web/CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function