현우의 개발상자
멋쟁이사자 FE7 12일차 본문
728x90
Findings (배운 점)
animation
- JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다.
- 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다.
transition vs animation
- transition의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다.
@keyframes
- 0%(from)는 시작점, 100%(to)는 종료지점을 의미한다.
/* [ from ~ to 속성 ] */
@keyframes animation-name {
from {}
to {}
}
/* [ 0% ~ 100% 속성 ] */
@keyframes animation-name {
0% {}
50% {}
100% {}
}animation-duration
- 애니메이션이 한 사이클 완료하는데 걸리는 시간
- 음수값으로 설정하면 애니메이션이 실행되지 않는다.
animation-timing-function
- 애니메이션이 진행되는 방식을 설정
- 기본값 ease : 애니메이션 중간으로 갈수록 속도가 증가하고 끝에서 다시 느려짐.
- ease
처음에 천천히 시작하여 빨라지며, 마지막에 다시 느려집니다. ease-in-out과 동작이 동일하지만 ease는 마지막 속도보다 시작 속도가 약간 더 빠릅니다. - linear
상태가 선형으로 변화합니다. 즉, 애니메이션의 변화 속도가 처음부터 끝까지 동일합니다. - ease-in
처음에 천천히 시작하여 마지막에 속도를 높여 끝납니다. - ease-out
처음에 빠른 속도에서 시작하여 마지막에 천천히 속도를 줄여 끝납니다. - ease-in-out
천천히 시작되어 정상 속도가 되었다가 마지막에 느려집니다. - step(단계 횟수, start / end)
지정해 준 횟수만큼, 지정한 시간 동안 동일한 간격을 가지고 변화를 가져간다.
start라고 지정해 주면 시작과 동시에 변화를 가져가고, end라고 지정해 주면 완료 시점에 마지막 스텝의 변화가 일어난다고 보면 된다.
ex) 시간을 1s(초)라고 지정을 하고 step(3, start)의 경우는 1초 동안 시작하자마자 처음에 변화를 가져가면서 1단계가 되는 것이고. step(3.step)의 경우는 끝나는 시점 즉 3번째 단계에서 변화를 가져가고 종료한다.
그냥 쉽게 말해 n개의 단계이다.
- ease
animation-delay
- 언제 애니메이션이 시작될지 지정한다.
- 음수값을 지정하게 되면 애니메이션이 도중에 시작된다. 즉 애니메이션이 주기의 중간부터 시작된다.
ex) animation-delay: -1s = 애니메이션 1초 이후 시점에서부터 시작된다.
animation-iteration-count
- 애니메이션 재생 횟수를 설정한다.
- infinite 영원히 반복, 0.5 절반 재
animation-direction
- 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되여야하는지 여부를 지정한다
- normal : 기본 값, 정방향으로 재생
- revers : 역방행 재생
- alternate : 정방향, 역방향 반
- alternate-reverse : 역방행, 정방향 반복
See the Pen Untitled by 최현우 (@ifdnbwue-the-selector) on CodePen
animation-fill-mode
- 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
- none: 기본값. 애니메이션이 종료되면 해당 요소는 애니메이션 이전의 상태로 되돌아간다
- forwards: 애니메이션이 종료된 후에도 애니메이션의 마지막 프레임 상태를 유지한다. 즉, 애니메이션의 마지막 상태가 유지되어 해당 요소가 애니메이션이 완료된 후의 모습을 유지한다
- backwards: 애니메이션의 첫 번째 프레임 상태가 애니메이션 시작 전에 이미 적용되며, 애니메이션이 시작되기 전까지 유지된다. 이는 애니메이션 시작 전에 첫 번째 프레임의 스타일을 미리 적용할 때 유용하다.
- both: 애니메이션이 시작되기 전부터 끝날 때까지 backwards와 forwards의 동작을 모두 수행한다. 즉, 애니메이션 시작 전에 첫 번째 프레임의 스타일을 적용하고, 애니메이션이 종료된 후에도 마지막 프레임의 스타일을 한다.
Apply & Feeling (적용 및 느낀 점)
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>사자 애니메이션</title>
</head>
<style>
div {
width: 168px;
height: 200px;
background: url(../images/keyframes-licat.png) no-repeat 0 0 / auto 100%;
animation: movemove 0.8s infinite steps(6);
}
@keyframes movemove {
to {
background-position: right 0;
}
}
</style>
<body>
<div class="lion"></div>
</body>
</html>
중요 포인트 : 위와 같은 애니메이션을 만들기위해서는 원본이미지의 위치를 animation-timing-function:step(6)을 통해 넘겨가면서 보여줘야 한다. // 총 6개의 모션을 취하는 그림이 있다. step을 6 단계로 나눠주자.
See the Pen Untitled by 최현우 (@ifdnbwue-the-selector) on CodePen.
중요포인트 : animation-fill-mode : both를 통해 마우스를 올렸을때, 시작 전의 첫 번째 프레임의 스타일을 적용하고 마지막 프레임의 스타일을 유지해준다.
오늘은 애니메이션에 대해 공부했다. 아무래도 처음 사용하는 속성들이 많다 보니 오타가 많이 발생했다. 우리의 컴퓨터는 사람과 다른 게 0.1% 라도 잘 못 알려주면 알아듣지를 못한다. 하나하나 꼼꼼하게 코딩을 하는 습관을 들여야겠다!
'멋쟁이사자 FE7' 카테고리의 다른 글
| 멋쟁이사자 FE7 14일차 (0) | 2023.07.20 |
|---|---|
| 멋쟁이사자 FE7 13일차 (0) | 2023.07.19 |
| 멋쟁이사자 FE7 11일차 (0) | 2023.07.17 |
| 멋쟁이사자 FE7 10일차 (0) | 2023.07.14 |
| 멋쟁이사자 FE7 9일차 (0) | 2023.07.13 |
'멋쟁이사자 FE7' Related Articles
more
