728x90
animation
- 미리 지정해둔 설정 값에 따라 자동으로 실행되는 모션 만들기 -
저번에 transition 속성을 활용한 마우스 오버 시의 모션 효과를 구현했습니다.
이번 절에서는 animation과 @keyframes라는 속성을 통해
사용자의 별다른 행동 없이도 미리 지정해 놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다.
animation을 설정하기 위해서는 @keyframes라는 명령어를 이용해 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤,
animation 구문으로 @keyframes에서 미리 설정했던 모션을 호출하는 방식으로 동작합니다.
필수 구문 정리
@keyframes 모션이름 {
0% { 모션 시작점의 CSS 설정 }
100% { 모션 끝점의 CSS 설정 }
}
animation : 모션이름호출 시간 가속도 지연시간 반복횟수 방향지정;
아래의 표는 animation에서의 속성들입니다.
| 속성 | 정의 |
| 모션이름 | @keyframes에서 미리 정의한 모션을 호출합니다. |
| 시간 | 0% ~ 100%까지의 실행 속도를 초 단위로 설정합니다. 예) 0.5s, 1s |
| 가속도 | 모션의 가속도를 지정합니다. linear(가속도 없음) / ease(가속도 있음) |
| 지연시간 | 모션이 시작도기 전 지연시간을 지정합니다. 생략 시 지연시간 없음 |
| 반복횟수 | 0% ~ 100% 까지의 반복횟수를 지정합니다. infinite 설정 시 무한 반복 |
| 방향지정 | normal(0% ~ 100% 반복 실행) / alternate(0% ~ 100% 완료 시 다시 100% ~ 0% 반복) |
@keyframes에서는 단순히 변경될 형태의 시작점과 끝점을 CSS 구문으로 미리 정의만 할 뿐이며
실제 모션의 실행은 animation 구문에서 미리 정의한 @keyframes를 호출하는 식으로 진행됩니다.
✨키포인트!
@keyframes에서 미리 모션을 정의한 후, animation 구문을 통해 해당 모션에 속도와 횟수 등을 지정합니다.결과 화면
해당 <div>가 2초 동안 한 바퀴 회전하며 총 3번 회전하고 정지합니다.
( animation: ani 2s linear 3 normal; )
코드
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
@keyframes ani {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
div {
width: 300px;
height: 300px;
margin: 100px;
animation: ani 2s linear 3 normal;
background: linear-gradient(45deg, pink, red);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
코드 해설
- 먼저 @keyframes에 ani라는 이름을 임으로 부여한 뒤, 시작점에는 회전 값을 0도, 끝점에는 회전 값을 360도 설정합니다.
- 모션을 적용할 <div>를 선택한 후 animation 구문을 통해서 미리 설정해둔 ani를 호출과 동시에 모션 속도는 2초, 가속도 없음으로 3회 동안 한 방향으로 반복 설정합니다.
Reference
- (Book) 인터랙티브 웹디자인 북
728x90
반응형
'WEB > HTML&CSS' 카테고리의 다른 글
| [CSS] transition : 전환 효과 (0) | 2023.02.08 |
|---|---|
| [HTML5] <video>태그 (0) | 2023.02.05 |
| [HTML] 띄어쓰기 3종류와 간격 확인하기. (  | &ensp | &emsp) (2) | 2023.01.09 |
| [CSS] 동그라미 만들기 (0) | 2023.01.04 |
| [HTML] HTML 웹사이트를 분석하는 꿀팁 (유투브 드림코딩 필기) (0) | 2023.01.04 |
댓글