<!DOCTYPE html>
<html lang="ko">
<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>애니메이션의 지점, 이름, 실행시간 적용하기</title>
<style>
#container {
width:500px;
margin:20px auto;
}
.box {
width:100px;
height:100px;
float:left;
margin:50px;
}
#box1 {
background-color:#4cff00; /*연두색 박스*/
border:1px solid transparent; /*1px짜리 투명 테두리 */
animation-name:shape; /*애니메이션 지정*/
animation-duration: 3s; /*애니메이션 실행 시간 */
}
#box2 {
background-color:#8f06b0; /*보라색 박스*/
border:1px solid transparent; /*1px짜리 투명 테두리 */
animation-name:rotate; /*애니메이션 지정*/
animation-duration:3s; /*애니메이션 실행 시간 */
}
@keyframes shape {
from {border:1px solid transparent;} /*1px짜리 투명 테두리에서 */
to {
border:1px solid #000; /*검은색 테두리로 변경 */
border-radius:50%; /*테두리를 둥글게 변경 */
}
}
@keyframes rotate {
from{transform:rotate(0deg);} /*0도에서 시작해서*/
to {transform:rotate(45deg);} /*45도까지 회전하기 */
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 11장 마무리 문제 1 (0) | 2023.04.03 |
|---|---|
| 11장 예제 - 애니메이션 2개를 한꺼번에 지정하기 (0) | 2023.04.03 |
| 11장 실습 1 (0) | 2023.04.03 |
| 11장 예제 - 트랜지션 속성 한꺼번에 지정하기 (0) | 2023.04.03 |
| 11장 예제 - 트랜지션 대상과 진행 시간 진행하기 (0) | 2023.04.03 |