<!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>
.box {
width:100px;
height:100px;
margin:60px auto;
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}
@keyframes rotate {
/*0도 ->x축 -180도 회전 -> y축 -180도 회전 */
from {transform: perspective(120px) rotateX(0deg) rotateY(0deg)}
50% {transform: perspective(120px) rotateX(-180deg) rotateY(0deg);}
to {transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);}
}
@keyframes background {
from {background-color:red;} /*시작 배경색은 빨강 */
50% {background-color:green;} /*중간(50%) 배경색은 초록 */
to {background-color:blue;} /*마지막(100%) 배경색은 파랑 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
'css' 카테고리의 다른 글
| 11장 마무리 문제 2 (0) | 2023.04.03 |
|---|---|
| 11장 마무리 문제 1 (0) | 2023.04.03 |
| 11장 예제 - 애니메이션의 지점, 이름, 실행시간 적용하기 (0) | 2023.04.03 |
| 11장 실습 1 (0) | 2023.04.03 |
| 11장 예제 - 트랜지션 속성 한꺼번에 지정하기 (0) | 2023.04.03 |