transform과 animation을 결합하면 다양한 애니메이션 효과를 만들 수 있습니다.
해당 실습에서는 회전하는 애니메이션 효과를 만들어 봅시다!
- .box1 안에 animation 속성을 입력합니다.
- 애니메이션 이름은 rotation으로 설정합니다.
- duration으로 1500ms을 입력합니다. 이때, 1000ms은 1s입니다.
- timing-function으로 linear을 입력합니다.
- iteration-count으로 infinite을 입력하여, 반복 효과가 무한으로 나타나도록 합니다.
- direction으로 alternate을 입력하여, 왕복 효과가 나타나도록 합니다.
- @keyframes rotation { }를 작성하여 from과 to를 설정합니다. from은 transform: rotate(-10deg);, to는 transform: rotate(10deg);로 설정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Transform, Animation</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: red;
animation:rotation 1500ms linear infinite alternate;
}
@keyframes rotation{from{transform:rotate(-10deg);} to{transform:rotate(10deg);}}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
결과화면
'온라인 강의 > HTML CSS 심화' 카테고리의 다른 글
| 본문 영역 애니메이션 구현하기 (0) | 2023.04.17 |
|---|---|
| 메뉴 영역 애니메이션 구하기 (0) | 2023.04.17 |
| Animation (0) | 2023.04.17 |
| Transition (0) | 2023.04.17 |
| Transform (0) | 2023.04.17 |
