요소의 속성값을 자연스럽게 변화
transition
CSS 속성은 요소의 자연스러운 변화를 위한 단축 속성이다. 즉 transition
속성을 사용하여 두 요소 사이의 상태 변화를 줄 수 있다.
요소의 각 상태는 가상 클래스를 사용해 정의된 :hover
나 :active
를 사용해 동적으로 만들어진다.
.box {
/* 변화가 일어날 대상요소에 transition적용 */
transition: all 2500ms cubic-bezier(.01,.44,1,-0.42) 1000ms;
}
.box.active {
/* 변화가 일어날 대상요소가 최종적으로 변할 속성값 적용 */
font-size: 30px;
background-color: #ff4949;
}
transition
은 property
, duration
, timing-function
, delay
등의 속성값을 사용할 수 있다.
이 때 속성값은 한줄로 축약해서 작성할 수 있다.
property : 변화가 일어날 속성을 명시
duration : 지속시간 (ms(mile second), s(second)단위를 사용)
[timing-function]
(생략가능) : 변화의 속도 (ease-in, ease-out, ease-in-out, cubic-bezier단위를 사용)
[delay]
(생략가능) : 변화를 시작할 특정시간
다수의 스타일을 전환하는 애니메이션을 적용
animation
CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용한다.
transition
은 어떤 요소의 css속성을 적용한 뒤 그 속성의 값이 변화할 때 갑자기 바뀌는 것이 아닌 자연스럽게 전환되는 것이다.
animation
은 어떤 요소에 적용하고 싶을 때 바로 사용 가능하기 때문에 transition
보다 자유도가 높다.
@keyframes
로직 선언/* animation 로직 선언방법1 */
@keyframes move-box {
from {
top: 0;
background-color: #0066ff;
}
to {
top: 200px;
background-color: #ff4949;
}
}
/* animation 로직 선언방법2 */
@keyframes move-box {
0% {
top: 0;
background-color: #0066ff;
}
50% {
top: 100px;
background-color: #ff1;
}
100% {
top: 200px;
background-color: #ff4949;
}
}
animation
로직 적용.box {
position: relative;
width: 300px;
height: 300px;
/* defailt색상을 지정하지 않으면 animation이 끝나고 사라진다. */
background-color: #0066ff;
/* animation 로직 적용 */
/* transition과 동일 속성 */
animation-name: move-box;
animation-duration: 2000ms;
animation-timing-function: ease-in-out;
animation-delay: 1000ms;
/* animation 추가 속성 */
/* 반복 횟수 -> 정수값, infinite */
animation-iteration-count: 3;
/* @keyframes 진행 방향 */
/* alternate : from, to -> to, from 방향 반복 */
animation-direction: alternate;
}
animation
의 속성값은 transition
속성값 + iteration-count
(반복 횟수) + direction
(진행 방향)이다.
animation
의 속성값이 transition
보다 많기 때문에 속기형보다는 각각 속성값을 적용한다.
transition - CSS: Cascading Style Sheets | MDN
animation - CSS: Cascading Style Sheets | MDN
김버그의 CSS는 재밌다 - 기초부터 실무 레벨까지