이전 절에서는 transtion 속성을 활용하여 마우스 오버 시에 모션 효과를 구현하였습니다. 이번 절에서는 animation과 @keyframes를 활용하여 사용자의 별다른 행동 없이도 미리 저장해놓은 설정 값에 따라 자동으로 움직이는 모션을 배워보겠습니다.
animation을 설정하기 위해서는 @keyframes라는 명령어를 이용하여 해당 모션의 시작점과 끝점을 미리 설정해 놓은 뒤, animation 구문으로 @keyframes에서 미리 설정했던 모션을 호출하는 방식으로 동작합니다. animation의 경우에는 @keyframse의 설정 등 다소 사용방식이 복잡할 수 있으므로 필수 구문이 잘 이해되지 않는다면 바로 해당 예제를 따라해보면서 animation 구문의 실행 흐름을 살펴보시기 바랍니다.
# Contents
- animation
# animation
animation의 기본 문법은 아래와 같습니다.
animation: 모션잉름호출 시간 가속도 지연시간 반복횟수 방향지정
@keyframes에서 미리 모션을 정의한 후, animation 구문을 통해 해당 모션에 속도와 횟수 등을 지정합니다.
먼저 예제코드를 보도록 하겠습니다. 첫번째로 index.html 코드입니다.
<!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>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div>
<p>box1</p>
</div>
</body>
</html>
다음은 style.css 코드입니다.
@keyframes ani {
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
}
div {
width: 600px;
height: 400px;
margin: 200px auto;
border: 1px solid red;
position: relative;
perspective: 1600px;
background-color: salmon;
animation: ani 1s ease 0s infinite alternate;
}
먼저 @keyframse에 ani라는 이름을 임의로 부여한 뒤, 시작점에는 회전 값을 0도, 끝점에는 회전 값을 360도로 설정합니다. 모션을 적용할 <div>를 선택한 후 animation 구문을 통해 미리 설정해둔 ani를 호출과 동시에 모션 속도는 1초, 가속도 설정을 하였습니다.
'기초 문법 > HTML&CSS' 카테고리의 다른 글
| [CSS] transition (0) | 2021.11.23 |
|---|---|
| [CSS] 특정 요소의 모양을 3차원 공간에서 입체적으로 변형하기 (0) | 2021.11.23 |
| [CSS] 특정 요소의 모양을 평면상에서 자유롭게 변형하기 (0) | 2021.11.23 |
| [CSS] 배경에 그라디언트 색상과 모양 지정하기 (0) | 2021.11.23 |
| [CSS] box-sizing (0) | 2021.10.15 |
