/*CSS 는 프로퍼티가 변경되면 그에 따른 변화가 즉시 나타나는데 표시의 변화를 부드럽게 하기 위해 트랜지션을 사용*/
div {
width: 100px;
height: 100px;
background: red;
/* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
/* 트랜지션 효과: 모든 프로퍼티의 변화를 2초에 걸쳐 전환한다. */
transition: all 2s;
}
div:hover {
/*마우스가 div 의 위에 올라왔을때 바뀜*/
border-radius: 50%;
background: blue;
}
/*div:hover 에 transition 을 설정하면 마우스가 올라갈 때(hover on)는 transition 이 발동하지만 마우스가
내려올 때(hover off)는 transition 이 발동하지 않는다.*/
/*transition 은 자동으로 발동 x. :hover 와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript 의
onclick 이벤트와 같은 부수적인 액션에 의해 발동한다.*/
/*프로퍼티 설명 기본값*/
/*transition-property 트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다 all*/
/*transition-duration 트랜지션이 일어나는 지속시간(duration)을 초 단위로 지정한다 0s*/
/*transition-timing-function 트랜지션 효과를 위한 수치 함수를 지정한다. ease*/
/*transition-delay 프로퍼티 변화 시점과 시작하는 사이에 대기하는 시간을 초 단위로 지정 0s*/
/*transition 모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)*/
/*transition-property 프로퍼티는 트랜지션의 대상이 되는 CSS 프로퍼티명을 지정한다.
지정하지 않는 경우 모든 프로퍼티가 트랜지션의 대상이 된다. 복수의 프로퍼티를 지정하는 경우 쉼표(,)로 구분*/
/*트랜지션의 대상이 될 수 있는 CSS 프로퍼티*/
/*// Box model*/
/*width height max-width max-height min-width min-height*/
/*padding margin*/
/*border-color border-width border-spacing*/
/*// Background*/
/*background-color background-position*/
/*// 좌표*/
/*top left right bottom*/
/*// 텍스트*/
/*color font-size font-weight letter-spacing line-height*/
/*text-indent text-shadow vertical-align word-spacing*/
/*// 기타*/
/*opacity outline-color outline-offset outline-width*/
/*visibility z-index*/
/*또한 요소의 프로퍼티가 변화하면 브라우저는 프로퍼티 변화에 영향을 받는 모든 요소의 기하값(위치와 크기)를
계산하여 layout 작업을 수행해야 한다. 이것은 브라우저에게 스트레스를 주어 성능 저하의 요인이 된다.
심지어 다수의 자식 요소를 가지고 있는 요소(예를 들어 body 요소)가 변경되면 모든 자식 요소의 기하값이
재계산될 수도 있다. 따라서 layout 에 영향을 주는 트랜지션 효과는 회피하기 위한 노력이 필요하다.*/
/*layout 에 영향을 주는 프로퍼티*/
/*width height padding margin border*/
/*display position float overflow*/
/*top left right bottom*/
/*font-size font-family font-weight*/
/*text-align vertical-align line-height*/
/*clear white-space*/
/*transition-duration 프로퍼티는 트랜지션에 일어나는 지속시간(duration)을 초 단위로 지정한다.
프로퍼티값을 지정하지 않을 경우 기본값 0s이 적용되어 어떠한 트랜지션 효과도 볼 수 없다.*/
div {
width: 100px;
height: 50px;
padding: 10px;
color: white;
background-color: red;
margin-bottom: 10px;
transition-property: width, opacity;
}
div:nth-child(1)
{
transition-duration: 0.5s;
}
div {
/*transition-duration 프로퍼티값은 transition-property 프로퍼티값과 1:1 대응한다. */
/*아래의 경우, width 프로퍼티는 2초에 지속시간을 갖는다(2초에 걸쳐 변화한다).*/
transition-property: width;
transition-duration: 2s;
}
div {
/*width 프로퍼티는 2초, opacity 프로퍼티는 4초의 지속시간*/
transition-property: width, opacity;
transition-duration: 2s, 4s;
/* shorthand syntax */
transition: width 2s, opacity 4s;
}
div {
/*width 프로퍼티는 2초, opacity 프로퍼티는 1초, left 프로퍼티는 2초, top 프로퍼티는 1초의 지속시간*/
transition-property: width, opacity, left, top;
transition-duration: 2s, 1s;
}
/*transition-timing-function*/
/*트랜지션 효과의 변화 흐름, 시간에 따른 변화 속도와 같은 일종의 변화의 리듬을 지정한다.*/
/*프로퍼티값 효과*/
/*case 기본값이며 느리게 시작, 점점 빨라지다 느려지며 종료*/
/*linear 시작부터 종료까지 등속운동*/
/*ease-in 느리게 시작, 일정속도 다다르면 그상태로 등속운동*/
/*ease-out 일정속도로 등속시작해서 점점 느려지며 종료*/
/*ease-in-out ease 와 비슷하게 느리게 시작하여 느려지며 종료*/
/*transition-delay*/
/*프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위로 지정한다.*/
div:nth-of-type(2) {
transition-delay: 1s;
}
/*transition*/
/*모든 트랜지션 프로퍼티를 한번에 지정할 수 있는 shorthand. 값을 지정하지 않은 프로퍼티에는 기본값 지정*/
/*transition: property duration function delay*/
/*transition-duration 은 반드시 지정*/
div:nth-of-type(1) {
/* property duration function delay */
transition: width 1s ease-in 1s;
}
div:nth-of-type(2) {
/* duration */
transition: 1s
}
div:nth-of-type(3) {
/* property duration */
transition: width 1s
}
div:nth-of-type(4) {
/* duration function */
transition: 1s ease-in;
}
div:nth-of-type(5) {
/* duration delay*/
transition: 1s 1s;
}