이전 게시글에서 transition 속성을 활용한 마우스 오버 시의 모션 효과를 구현했습니다. 이번 게시글에서는 animation과 @keyframes라는 속성을 통해 사용자의 별다른 행동 없이도 미리 지정해 놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다.
animation을 설정하기 위해서는 @keyframes라는 명령어를 이용해 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 설정했던 모션을 호출하는 방식으로 동작합니다. 우선 다음의 기본 사용규칙을 살펴보겠습니다. animation의 경우는 @keyframes의 설정 등 다소 사용방식이 복잡해 보일 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 animation 구문의 실행 흐름을 살펴보시기 바랍니다.
(1) @keyframes 모션이름 {
0% { 모션 시작점의 css 설정 }
100% { 모션 끝점의 css 설정 }
}
(2) 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 구문을 통해 해당 모션에 속도와 횟수 등을 지정합니다.
다음의 예제를 통해 animation의 기본 개념을 숙지해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
@keyframes ani {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); background: dodgerblue; }
}
div {
width: 300px;
height: 300px;
background: pink;
margin: 100px;
animation: ani 2s linear 3 normal;
}
</style>
</head>
<body>
<div></div>
</body>
</html><div> 태그를 생성합니다. 먼저 @keyframes에 ani라는 이름을 임의로 부여한 뒤, 시작점에는 회전 값을 0도, 끝점에는 회전 값을 360도 설정한 후 변경 될 배경값을 넣어줍니다. 모션을 적용할 <div>를 선택한 후 animation 구문을 통해서 미리 설정해둔 ani를 호출과 동시에 모션 속도는 2초, 가속도는 없음으로 3회동안 한 방향으로 반복 설정합니다.
해당 <div>가 2초동안 한 바퀴 회전하며 횟수를 3회 지정하였기 때문에 총 3번 회전하고 정지합니다.
'💕IT 공부하기 > CSS3' 카테고리의 다른 글
| [CSS] 구글웹폰트 : 구글 웹 폰트 서비스를 이용하여 밋밋한 폰트를 다양하게 설정하기 (1) | 2023.05.12 |
|---|---|
| [CSS3] mediaquery : 반응형 웹의 핵심, 원하는 화면 해상도별로 원하는 CSS를 연결하기 (0) | 2023.05.10 |
| [CSS3] transition : CSS 속성의 변화 값을 일정한 시간 동안 모션으로 전환 효과 주기 (0) | 2023.05.01 |
| [CSS3] transform(3d변형) : 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 (0) | 2023.04.29 |
| [CSS3] transform(2d변형) : 특정 요소의 모양을 평면상에서 자유롭게 변형하기 (0) | 2023.04.27 |