1. 애니메이션 등록(@keyframes)
- 시간비율은 0~100%,
0% = from, 100% = to로 대체가능
@keyframes 애니메이션 명{
시간비율{
스타일;
}
시간비율{
스타일;
}
}
2. 애니메이션 적용
- animation-name : 동작할 애니메이션 이름
- animation-duration : 애니메이션 동작시간
- animation-iteration-count : 애니메이션 반복 횟수, 숫자 or infinite(무한)
== 사용예시 ==
가장 앞의 화면이 흐려졌다가 밝아졌다하는 애니메이션
<!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">
<title>opacity사용</title>
<style>
.bg, .front{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.bg{
background-image: url(/image/pochacco.png);
background-repeat: no-repeat;
background-size: cover;
animation-name: background1;
animation-duration: 5s;
animation-iteration-count: 10;
/* background1애니메이션을 5초에 한번씩 10번 반복 */
z-index: 100;
/* z-index는 앞으로 나와있는 순서! = 수가 높을수록 위에 있음!! */
}
.front{
width: 100%;
height: 100%;
background-color: lightsteelblue;
z-index: 50;
}
/* 1: 불투명 -> 0:투명 -> 1:불투명 */
@keyframes background1{
from{
opacity: 1;
}
50%{
opacity: 0;
}
to{
opacity: 1;
}
}
</style>
</head>
<body>
<!-- backgroundColor가 흐려져다가 밝아지도록 설정(animation) -->
<div class="bg"></div>
<div class="front"></div>
</body>
</html>
글자의 크기가 커졌다가 작아지는 애니메이션
<!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">
<title>animation</title>
<style>
/* 폰트 사이즈가 변경됨 */
@keyframes scaleFont {
from{
font-size: 20px;
}
50%{
font-size: 50px;
}
to{
font-size: 20px;
}
}
.ani{
animation-name: scaleFont;
animation-duration: 5s;
animation-iteration-count: 2;
/* scaleFont애니메이션을 5초에 한번씩 2번 보여줌 */
}
</style>
</head>
<body>
<span class="ani">animation</span>
</body>
</html>
'HTML - CSS > css 공부' 카테고리의 다른 글
| [CSS] transform 속성: 회전, 이동, 확대 (0) | 2023.04.25 |
|---|---|
| [CSS] 버튼 만들기 position : absloute (0) | 2023.04.24 |
| [CSS] display : flex 속성 (0) | 2023.04.12 |
| [CSS] cursor : pointer, 아이콘 사이트 (0) | 2023.04.06 |
| [CSS] shadow 그림자 설정 (0) | 2023.04.06 |