Animation
📌 Animation
: 자동으로 애니메이션이 진행되도록 함.
📌 infinite
: 반복해서 계속 애니메이션이 진행됨.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
@keyframes TurnAnim {
from {
transform: rotateX(0);
}
to {
transform: rotateX(360deg);
}
}
html {
background-color: blanchedalmond;
}
img {
border: 5px solid black;
border-radius: 50%;
animation: TurnAnim 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/frog.jfif"/>
</body>
</html>+ 추가 설명
더보기
이미지가 회전하는 애니메이션을 반복해서 한다.
Animation - %
📌 %
: %로 나눠서 애니메이션을 설정할 수 있음.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본 형식</title>
<link href="styles.css" rel="stylesheet"/>
<style>
@keyframes TurnAnim {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg) translateY(-100px);
}
100% {
transform: rotateY(0);
}
}
html {
background-color: blanchedalmond;
}
img {
border: 5px solid black;
border-radius: 50%;
animation: TurnAnim 5s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img/frog.jfif"/>
</body>
</html>+ 추가 설명
더보기
이미지가 회전하면서 위로 이동했다가 내려오는 것을 반복하는 애니메이션을 진행한다.
'CSS' 카테고리의 다른 글
| [CSS] Font 설정 (0) | 2022.09.21 |
|---|---|
| [CSS] Media Query (0) | 2022.09.19 |
| [CSS] Transform (0) | 2022.09.19 |
| [CSS] Transition (0) | 2022.09.19 |
| [CSS] custom property (0) | 2022.09.15 |
댓글