CSS 로 애니메이션을 만들어봅시다.
애니메이션은 요소를 어떠한 CSS 스타일에서 다른 스타일로 자연스럽게 변경합니다.
🧀 CSS 애니메이션
CSS 는 요소의 스타일을 정의합니다.
이 스타일은 너비, 높이, 색깔, 폰트 크기 등등... 여러가지를 표현하죠.
요소는 그에 적용된 CSS 에 따라 스타일이 달라집니다.
요소에 클래스를 추가하거나 하는 방법으로 적용된 스타일을 바꿀 수 있는데,
이 전환은 매우 빠르게 일어납니다.
클래스를 추가하자마자 바로 스타일이 바뀌니 좀 어색해보이기도 합니다.
따라서, 자연스럽게 바뀌는 모습을 모여주기 위해 애니메이션을 사용합니다.
transform
transform 을 사용하면 요소의 좌표, 크기 등을 변형하고
요소를 XYZ 축으로 회전시킬 수 있습니다.
box model 을 따르는 요소(padding, margin 을 가질 수 있는...) 라면
transform 속성을 적용할 수 있습니다.
인라인 요소등은 transform 을 적용해도 무시됩니다.
더불어, transform 속성이 none 이 아닌 값으로 지정된 요소는
쌓임 맥락(stacking context)을 형성합니다.
좌표는 왼쪽위를 (0, 0) 으로 합니다.
오른쪽이나 아래로 이동하면 좌표값이 플러스로 증가하고,
왼쪽이나 위로 이동하면 좌표값이 마이너스가 됩니다.
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: translate(12px, 50%);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: skew(30deg, 20deg);
transform: skewY(1.07rad);
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);rotate: 회전, 기본rotate는rotateZ와 같음turn: 1turn 이 한 바퀴, 360도deg: 1deg 가 1도
translate: 요소 좌표값을 인자만큼 변경, 기본translate는translateX- 현재 요소의 좌표에서
translate(x, y)는 +x, +y 만큼 좌표 변환
- 현재 요소의 좌표에서
scale: 요소 크기를 인자만큼 늘림, 기본scale은scaleX와scaleY
함수를 하나, 혹은 여러 개 사용하여 값을 지정할 수 있습니다.
여러 개의 함수를 적용할 경우 오른쪽부터 적용됩니다.
🖍️ transition
transition 은 요소의 상태가 변화할 때 상태 전환 효과를 정의됩니다.
예를 들면 색깔이 빨강에서 파랑으로 변화할 때, 3초동안 천천히 변하게 하거나,
변화 전 1초간 딜레이를 주거나 할 수 있죠.
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | easing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition:
margin-right 4s,
color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;위처럼 변화할 속성과 변화 기간, 변화 속도 애니메이션, 딜레이 시간 등을
지정해줄 수 있습니다.
transition 을 적용할 요소는 오리지널 상태와 변화된 상태가 있습니다.
어떤 요소에 마우스를 hover 하면 빨강색으로 변하게 하고 싶다면?
.someElem:hover 에 상태를 정의하거나 .turnRed 라는 클래스를 정의하여
마우스가 올라갔을때 .someElem 에 클래스를 추가하도록 하면 되겠죠?
이 때, .someElem 자체는 별다른 이벤트 없는 디폴트 상태이므로 오리지널,
:hover 이나 .turnRed 는 변화 당시를 가정하는 상태라고 볼 수 있습니다.
transition 속성을 오리지널 상태의 CSS 에 적어주면
hover 될 때와 hover 상태가 끝날 때 모두 transition 이 적용됩니다.
그러나, .someElem:hover 에 적어주면 hover 될 때만 트랜지션되고
hover 에서 벗어날 때는 트랜지션이 일어나지 않습니다.
.someElem {
color: blue;
transition: color 1s ease-in-out;
}
.someElem:hover {
color: red;
}
.turnRed {
color: red;
}transition은 원본 상태의 CSS 에 정의해야 변할때도 돌아올 때도 전환 효과 적용❗- 변환 상태에만 정의하면 원본으로 돌아올때는 전환 효과가 ❌
transition할 속성은 하나씩 따로 정하거나,all로 모두 선택 가능
transitionend 이벤트
transitionend 이벤트는 애니메이션이 끝나면 자동으로 트리거됩니다.
무한 반복 애니메이션을 만들고 싶을 때, transitionend 이벤트에 맞춰
다시 애니메이션을 발동하도록 하는 경우도 있죠.
elem.addEventListener("transitionend", callback);이벤트는 다음과 같은 특수 프로퍼티를 지원합니다.
event.propertyName: 애니메이션 완료된 속성event.elapsedTime: 딜레이가 없다고 가정하여, 애니메이션 효과에 걸린 시간(s)
🥝 keyframe animation
키프레임으로 이뤄진 애니메이션을 요소에 적용하면 transition 보다 더 자유로운
애니메이션을 사용할 수 있습니다.
@keyframes 를 사용하여 애니메이션 이름과 각 시점의 CSS 상태를 정의합니다.
그 후 요소에서 animation 속성을 사용하여 애니메이션을 적용합니다.
@keyframes animation-name {}이렇게 키프레임 애니메이션을 선언하고 이름을 정합니다.
@keyframes running {
from { left: 0; }
to { left: 100%; }
}위처럼 어느 시점에 요소가 어떤 모습을 할 지 정합니다.
from 으로 애니메이션 시작 시점, to 로 종료 시점의 상태를 나타냅니다.
@keyframes running {
0% {
top: 0;
left: 0;
}
30% {
top: 50px;
}
100% {
top: 100px;
left: 100%;
}
}from-to 가 아닌 % 로 시점을 정할 수도 있습니다.
animation 속성
animation 속성을 요소에 사용하여 사용할 애니메이션과 시간, 딜레이 등을 정합니다.
animation: name duration timing-function delay iteration-count direction fill-mode play-state위와 같이 사용합니다.
기본값은 다음과 같습니다.
animation: none 0 ease 0 1 normal none runningiteration-count(재생 횟수) 에infinite지정하면 무한 반복direction에alternate지정하면 애니메이션 실행마다 진행 방향 바뀜from-to로 했다가to-from으로 실행하는걸 번갈아가면서 함
fill-mode: 애니메이션 실행 전 대기, 애니메이션 종료 시 요소의 스타일none이면 시작 전후가 애니메이션에 영향 받지 않음. 실행 전 상태를 전후로 유지forwards면 애니메이션 종료 프레임에 설정한 스타일을 요소에 적용backwards면 시작 프레임에 설정한 스타일을 요소에 적용both면 시작 전후로 요소에 애니메이션 프레임 설정 스타일을 적용
play-state: 애니메이션 재생 상태,running이면 재생,paused면 중지
다음과 같이 적용합니다.
@keyframes go-left-right { /* 애니메이션 이름 지정: "go-left-right" */
from { left: 0px; } /* left 0px 부터 애니메이션 시작 */
to { left: calc(100% - 50px); } /* left 값이 100%-50px 될 때까지 애니메이션 적용 */
}
.progress {
animation: go-left-right 3s infinite alternate;
/* 해당 요소에 커스텀 애니메이션 'go-left-right' 적용
지속 시간은 3초,
반복 횟수는 무한(infinite)
alternate 속성으로 방향은 매번 바뀜
*/
position: relative;
border: 2px solid green;
width: 50px;
height: 20px;
background: lime;
}reference
