animination
animation과 transition의 차이점
- transition은 유저의 액션이나 어떤 행위로 인해 변화하지만 애니메이션은 유저의 액션이 없어도 요소가 스타일 자동으로 변경
@keyframes
- 위 구문 통해 개발자가 애니메이션 중간중간에 키프레임들을 설정하여 중간 절차를 제어
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="styles/main.css">
<title>CSS</title>
</head>
<body>
<div class="box">
a
</div>
</body>
</html>.box{
width:100px;
height: 100px;
border: 10px solid seagreen;
background-color: rgb(204,253,225);
border-radius: 30px;
animation: my-first-animation 5s infinite;
}
@keyframes my-first-animation{
0%{
font-size: 20px;
}
50%{
width: 300px;
font-size: 50px;
}
100%{
width: 100px;
font-size: 10px;
}
}keyframes을 사용 시 에는 2개 이상의 조건이 있어야 함.
animation-name
- keyframes의 이름이 작성 됨.
- 알파벳 대소문자를 가리며 a to z까지 숫자는 0 to 9까지 underscores(-) or dashes(_) 사용 가능
animation-duration
- transition-duration과 동일하여 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정
- animation-delay는 음수 값을 허용하지만 duration은 허용 하지 않는다.
animation-delay
- 시작하고 나서 한 사이클을 재생하는데 시간을 지연 할 수 있음
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="styles/main.css">
<title>CSS</title>
</head>
<body>
<div class="box1">
a
</div>
<div class="box2">
a
</div>
<div class="box3">
a
</div>
</body>
</html>div {
width:100px;
height: 100px;
border: 10px solid silver;
border-radius: 30px;
animation: my-first-animation 1s infinite;
}
.box1{
background-color: rgb(204,253,225);
/* 초기 값 */
animation-delay: 0;
}
.box2{
background-color: rgb(255,221,198);
animation-delay: 0.3s;
}
.box3{
background-color: rgb(186,239,250);
animation-delay: 0.6s;
}
@keyframes my-first-animation{
0%{
font-size: 20px;
}
50%{
width: 300px;
font-size: 50px;
}
100%{
width: 100px;
font-size: 10px;
}
}
함께 성장하는 것을 좋아하는 프론트엔드 개발자