애니메이션 개요
- 애니메이션은 유저의 특정 액션이 없어도 자동으로 스타일이 바뀌게 할 수 있음
- 애니메이션은 단순하게 A에서 B로 가는 등의 transition과 같은 전환이 아닌 다수의 스타일과 액션을 줄 수 있음
- animation도 단축 속성으로 쓸 수 있음
- animation의 경우, 다수의 스타일 세트를 keyframe이라는 개념을 통해서 animation-name에서 가져다가 씀
- 이 속성에 대한 property로 정해진 게 아닌 직접 animation을 만들어야함(keyframe으로)
- 참고자료
@keyframes
- transition은 기본 상태가 있고 트리거가 발생하면 또 다른 스타일로 전환하는 작업임
- animation은 여러 개의 스타일을 자동으로 실행시키는 속성임
- 그래서 개발자가 직접 animation에 대해서 정의해서 여러개의 스타일을 처리할 수 있음(하나하나의 프레임을 만드는 느낌)
- 직접 시간 즈음의 상태를 적용해서 처리할 수 있음(어떤 상태에서 어떤 상태로 전환된다는 걸 직접 만듬)
- 아래 예시처럼 해서 animation을 적용할 수 있음, 이 때 alternative 속성을 쓰면 원래대로 돌아올 때도 animation이 적용됨
- 예시
<div class="box">
🥵
</div>.box {
width: 100px;
height: 100px;
border: 10px solid seagreen;
background-color: rgb(204, 253, 255);
border-radius: 30px;
animation: my-first-animation 2s infinite alternate;
}
@keyframes my-first-animation {
from {
width: 100px;
}
to {
width: 200px;
}
}
- 이 때 alternate말고 2개 이상의 상태에서 여러개의 상황에서 animation을 주고 싶다면
%을 활용해서 써줘야함(아래 예시와 같이) - 그리고 다양한 속성에 대해서 animation을 줄 수 있음
- 예시
.box {
width: 100px;
height: 100px;
border: 10px solid seagreen;
background-color: rgb(204, 253, 255);
border-radius: 30px;
animation: my-first-animation 2s infinite;
}
@keyframes my-first-animation {
0% {
font-size: 20px
}
50% {
width: 300px;
font-size: 80px;
}
100% {
font-size: 20px;
}
}
- 물론 트리거를 만들어서 할 수 있음, 아래 예시와 같이 hover일 때만 animation을 준다면 그렇게 작동시키게 할 수 있음
.box {
width: 100px;
height: 100px;
border: 10px solid seagreen;
background-color: rgb(204, 253, 255);
border-radius: 30px;
}
.box:hover {
animation: my-first-animation 2s infinite;
}
@keyframes my-first-animation {
0% {
font-size: 20px
}
50% {
width: 300px;
font-size: 80px;
}
100% {
font-size: 20px;
}
}
animation-name, animation-duration
- animation-name은 미리 작성한 keyframes의 이름을 지정해줘야함(단축속성시에도 반드시 써야함)
- name을 쓸 때 룰이 있는데 a~z까지 그리고 숫자는 0~9까지 언더스코어(
_), 대시(-)를 써야함 다른 특수문자는 사용불가능함 - 이 때 none, initial, inherit 등과 같은 키워드로 이름을 지으면 안됨(키워드로 사용되기 떄문에)
- 이렇게 정한 keyframes name을 통해서 어디서든 가져다가 animation을 쓸 수 있고, 이에 대해서 어떻게 작동하는지만 정하면 됨
- animation-duration의 경우, 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정함
- keyframes 하나를 한 사이클로 봄, 얼마나 이 keyframes를 처리할 것인지
- ms, s로 사용 가능함
- 참고자료
- 참고자료
animation-delay, animation-timing-function
- animatio-delay는, 시작하고 난 뒤, 한 사이클을 재생할 때 약간의 지연시간을 줄 수 있는데 그 때 쓰는 속성임
- 마이너스 값을 줄 수 있는데, 시작은 바로 되지만, 대신 마치 마이너스 시간만큼 이미 animation이 시작된 것처럼 keyframes이 보임
- animation-timing-function의 경우, transition과 유사하게 linear, ease-in 등 동일하게 사용함
- 아래 예시와 같이 animation-delay를 줄 경우 차례대로 animation이 적용됨(서로 다르게 제어할 수 있음)
- 예시
<div class="box1">🥵</div>
<div class="box2">🥵</div>
<div class="box3">🥵</div>div {
width: 100px;
height: 100px;
border: 10px solid silver;
border-radius: 30px;
animation: my-first-animation 1s infinite;
}
.box1 {
background-color: rgb(204, 253, 255);
animation-delay: -0.3s;
}
.box2 {
background-color: rgb(255, 221, 198);
animation-delay: 0s;
}
.box3 {
background-color: rgb(186, 239, 255);
animation-delay: 0.3s;
}
@keyframes my-first-animation {
0% {
font-size: 20px
}
50% {
width: 300px;
font-size: 40px;
}
100% {
font-size: 20px;
}
}
animation-iteration-count, animation-direction
- animation-iteration-count로 숫자만큼만 animation이 반복되게끔 처리할 수 있음
- 앞선 예시에서 infinite로 하는데 무한 반복인데, 이 값을 쓰지 않으면 1번만 반복됨
- 일반적인 숫자값을 쓰는데 만약 0.5를 쓰게 되면 절반까지만 보여지고 끝남
- animation-direction의 경우 keyframes를 꼭 정방향이 아닌 역방향으로도 재생해서 처리할 수 있음
- 그래서 말 그대로 애니메이션 반복 횟수와 방향을 정하는 것임
- 예시
<div class="box1">🥵</div>div {
width: 100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: rgb(245, 255, 199);
}
.box1 {
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-direction: alternate-reverse;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
animation-play-state
- 기본값은 running으로 계속 animation이 재생되는 상태임, 만약 paused가 되면 일시정지되는 효과를 볼 수 있음
- 아래와 같이 play-state를 바꿔서 처리해볼 수 있음
- 예시
div {
width: 100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: rgb(245, 255, 199);
}
.box1 {
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
.box1:hover {
animation-play-state: paused;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
- 이 상태에 대해서 아래와 같이 반대로 설정해서 animation의 재생 상태를 컨트롤 할 수 있음
- 예시
div {
width: 100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: rgb(245, 255, 199);
}
.box1 {
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
animation-play-state: paused;
}
.box1:hover {
animation-play-state: running;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
animation-fill-mode
- animation-fill-mode의 경우 animation이 실행되기 전과 후에 대상의 스타일을 지정함
- none, forwards, backwards, both 4개의 값을 사용할 수 있음
- forwards의 경우, keyframes에서 끝난 모습을 유지하라는 의미를 가지고 있음
- backwards의 경우, 미리 적용된 값에 대해서 유지하라는 의미를 가짐
- both의 경우 forwards, backwards가 둘 다 적용됨
- 이때 아래의 예시를 보고 설명을 하자면 5개의 상태로 이해할 수 있음
- 먼저 1. 기존 스타일이 될 것이고 그 다음 2. keyframes의 첫 번째 스타일 그리고 3. animation 진행시의 스타일
- 그리고 4. keyframes의 100% 스타일이 적용되고 마지막에 5. 기존 스타일로 돌아올 것임
- 이 떄 5가지 단계 중 앞서 설명한 animation에서의 keyframes 상태가 animation의 상태임(2~4)
- 이 상황에서 fill-mode를 통해서 원래 기존 스타일로 돌아오지 않게 제어할 수 있는 속성임
- 여기서 forwards 속성을 주면 1번부터 해서 4번 스타일에서 끝남, backwards를 하면 2번부터 시작해서 5번으로
- 시작 & 끝나는 frames에 대한 처리를 한다는 것(from, to 상황도 마찬가지)
- both의 경우 딱 animation keyframes 단위에서만 처리되는 것임(2~4번으로 끝)
- 그래서 시작과 끝을 제어하는 속성임
- 예시
<div class="box1">🥵</div>div {
width: 100px;
height: 100px;
border: 10px solid green;
}
.box1 {
background-color: rgb(245,255,229);
animation: fill-mode 3s linear 1s;
animation-fill-mode: both;
}
@keyframes fill-mode {
0% {
background-color: red;
}
50% {
width: 200px;
}
100% {
background-color: black;
}
}
animation(shorthand)
- 앞서 배운 animation 속성에 대해서 단축 속성을 통해서 모두 처리할 수 있음
- 이 단축 속성을 쓰면 mdn 자료에서 나온대로 기본값이 이미 설정되어 있음
- 참고자료
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다