반응형
animation
- 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줄 수 있다
- CSS에서 애니메이션 속성으로 동적인 효과를 줄 수 있다
- 애니메이션의 상태를 나타내는 키프레임들로 구성
- @keyframes
@keyframes name {
0% {...}
n% {...}
100% {...}
} → name: 애니메이션 이름 설정
0% : 시작할 때의 모양을 설정. from으로 사용해도 가능
n% : n% 일 때의 모양을 설정
100% : 끝날 때의 모양을 설정. to로 사용해도 가능
- @keyframes
- 트랜지션 효과 보다 훨씬 더 규모가 크고 복잡하지만 다양한 효과를 적용해서 좀 더 정밀하고 원하는 CSS효과를 줄 수 있다
- JS를 모르더라도 간단하게 애니메이션을 구상할 수 있다
- JS를 이용한 애니메이션이 아니라 CSS 애니메이션으로 여러 기술을 이용하여 최대한 부드럽게 랜더링 할 수 있다
- 브라우저에서 애니메이션의 성능을 효율적으로 최적화가 가능하다
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
@keyframes big {
from {
width: 20px;
height: 20px;
}
to {
width: 200px;
height: 200px;
}
}
#jb {
margin: 30px auto;
width: 20px;
height: 20px;
background-color: orange;
animation-name: big;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: none;
animation-play-state: running;
}
</style>
</head>
<body>
<div id="jb"></div>
</body>
</html>
animation-name
- 어떤 @keyframes을 사용할지 설정한다.
- 예제에서는 big을 사용한다.
animation-duration
- animation-duration : time | initial | inherit
- time : 시간을 설정. 기본값은 0. 단위는 s(초) 또는 ms(1000분의 1초)를 사용.
- initial : 기본값으로 설정
- inherit : 부모의 요소의 속성값을 상속 받게 설정.
- 애니메이션이 지속되는 총 시간을 설정한다.
- 예제에서는 2초 동안 애니메이션을 시작하고 끝을 낸다.
animation-timing-function
- animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int, start|end) | cubic-bezier(n, n, n, n) | initial | inherit
기본값은 ease.
- 애니메이션 진행 속도를 설정한다.
- 예제에서는 등속도로 진행하게 설정
animation-delay
- 애니메이션을 시작하기 전에 대기하는 시간을 설정
- 예제에서는 2초 대기 후 시작하도록 설정
animation-iteration-count
- 애니메이션 반복 횟수를 설정
- 예제에서는 4회 반복
animation-direction
- animation-direction : normal | reverse | alternate | alternate-reverse | initial | inherit
- normal : 기본값. 정해진 순서로 진행하기로 설정
- reverse : 반대 순서로 설정
- alternate : 정해진 순서로 진행했다가 반대 순서로 설정
- alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 설정.
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값으로 상속 받게 설정.
- 애니메이션 진행 방향을 설정 한다.
- 예제에서는 정방향 → 역방향 → 정방향 → 역방향 → … 으로 진행하도록 설정
animation-fill-mode
- animation-fill-mode : none | forwards | backwards | both | initial | inherit
기본값은 none
- 애니메이션을 마친 후 어떤 상태로 만들지 설정한다.
animation-play-state
- animation-play-state : running | paused | initial | inherit
- running : 애니메이션을 진행하기로 설정. 기본값이다.
- paused : 애니메이션을 진행하지 않게 설정.
- initial : 기본값으로 설정
- inherit : 부모 요소의 속성값을 상속받기로 설정
- 애니메이션을 진행할지 멈출지 설정한다.
- 예제에서는 진행하는 것으로 설정
→ 축약형으로 설정 가능
위 예제를 설정한다고 가정한다면
> animation : big 2s linear 2s 4 alternate none running
> animation : name / duration / timing-function / delay / iteration-count / direction / fill-mode / play-state
'HTML&CSS' 카테고리의 다른 글
| (CSS) pseudo (0) | 2023.01.11 |
|---|---|
| (CSS) position (0) | 2023.01.11 |
| (CSS) display (0) | 2023.01.11 |
| (CSS) 선택자 (0) | 2023.01.11 |
| (CSS) CSS & Link태그 (0) | 2023.01.11 |
