CSS
CSS Animation
by wlals5855
2024. 8. 29.
⭐ css 애니메이션
- 웹 요소에 애니메이션 추가
- 애니메이션을 시작해 끝내는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션 정의 가능
- 키프레임(keyframe)
>> 애니메이션 중간에 스타일이 바뀌는 지점
| 종류 |
설명 |
| @keyframes |
애니메이션이 바뀌는 지점을 지정합나다. |
| animation-delay |
애니메이션의 시작 시간을 지정합니다. |
| animation-direction |
애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정합니다. |
| animation-duration |
애니메이션의 실행 시간을 지정합니다. |
| animation-iteration-count |
애니메이션의 반복 회수를 지정합니다. |
| animation-name |
@keyframes로 설정해 놓은 중간 상태를 지정합니다. |
| animation-timing-funtion |
키프레임의 전환 형태를 지정합니다. |
| animaiton |
animation 속성을 한꺼번에 묶어서 지정합니다. |
@keyframes / animation-name / animation-duration 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
#container {
width:500px;
margin:20px auto;
}
.box {
width: 100px;
height: 100px;
float:left;
margin:50px;
}
#box1 {
background-color: lightblue;
border: 1px solid transparent;
/* 애니메이션 지정 */
animation-name: shape;
/* 애니메이션 실행 시간 */
animation-duration: 3s;
}
#box2 {
background-color: lightcoral;
border: 1px solid transparent;
/* 애니메이션 지정 */
animation-name: rotate;
/* 애니메이션 실행 시간 */
animation-duration: 3s;
}
/* shape 애니메이션 정의 */
@keyframes shape {
from {
/* 애니메이션 시작 디자인 */
border: 1px solid transparent;
}
to {
border: 1px solid #000;
/* 원 모양 */
border-radius: 50%;
}
}
/* rotate 애니메이션 정의 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
</div>
</body>
</html>
animation-direction / animation-iteration-count 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
#container2 {
width:500px;
margin:20px auto;
}
.boxclass {
width: 100px;
height: 100px;
float:left;
margin:50px;
}
#box1id {
background-color: lightblue;
border: 1px solid transparent;
/* 애니메이션 지정 */
animation-name: shape;
/* 애니메이션 실행 시간 */
animation-duration: 3s;
animation-direction: normal;
animation-iteration-count: 3;
}
#box2id {
background-color: lightcoral;
border: 1px solid transparent;
/* 애니메이션 지정 */
animation-name: rotate;
/* 애니메이션 실행 시간 */
animation-duration: 3s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
/* shape 애니메이션 정의 */
@keyframes shape {
from {
/* 애니메이션 시작 디자인 */
border: 1px solid transparent;
}
to {
border: 1px solid #000;
/* 원 모양 */
border-radius: 50%;
}
}
/* rotate 애니메이션 정의 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
</style>
</head>
<body>
<div id="container2">
<div class="boxclass" id="box1id"></div>
<div class="boxclass" id="box2id"></div>
</div>
</body>
</html>
animation-timing-function / animation 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Animation</title>
<style>
.boxbb {
width: 100px;
height: 100px;
margin: 60px auto;
animation: rotate 3s infinite, background 3s infinite alternate;
}
@keyframes rotate {
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: lightcoral; }
50% { background-color: lightblue; }
to { background-color: lightgreen; }
}
</style>
</head>
<body>
<div class="boxbb"> </div>
</body>
</html>
