AI와 데이터 사이언스의 이론과 실전
CSS - 애니메이션 효과 넣기, 사용자 정의 속성 본문
1. CSS Animation
요소의 현재 스타일을 다른 스타일로 변환하는 기능을 제공합니다. 애니메이션 효과를 넣습니다.
| 0% | 5% | 50% | 100% |
| 장면1 | 장면2 | 장면3 | 장면4 |
위와 같이 원하는 퍼센트에 원하는 장면을 넣으면 장면 사이의 효과를 css에서 알아서 주게됩니다.
이때 시작은 from, 끝은 to로 표현할 수 있습니다.
1.1. CSS Animation의 속성
- animation-name : 애니메이션의 이름을 설정
- animation-fill-mode : 애니메이션이 끝난 후 어떻게 처리할지 결정
- forwards : 애니메이션 키프레임이 완료되었을때 마지막 프레임을 유지(기본값 : 끝나면 첫장면을 보여줌)
- animation-direction : 애니메이션의 진행방향을 정하는 속성
- reverse : 반대 순서로 진행
- alternate : 정해진 순서로 진행했다가 다시 반대 순서로 진행
- reverse-alternate : 반대 순서로 진행했다가 다시 정해진 순서로 진행
- animation-duration : 애니메이션의 일어나는 시간을 설정
- animation-iteration-count : 애니메이션이 몇번 반복할 지 설정
- infinite : 무한반복
- 숫자 : 해당 숫자만큼 반복
- opacity : 투명도
< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation1</title>
<style>
.box{
padding: 20px;
height: 60px;
animation-name: moving;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes moving {
from {
width: 200px;
background-color: gold;
opacity: 0.5;
transform: rotate(0deg);
}
to {
width: 400px;
background-color: greenyellow;
opacity: 1;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h2>animation1</h2>
<div class="box"><h3>CSS Animation</h3></div>
</body>
</html>< 결과 >
animation1
CSS Animation
< 예시 코드 2 >
<!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>animation2</title>
<link rel="stylesheet" href="./css/animation2.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="clock"></div>
<p>Clock</p>
</div>
<div class="box">
<div class="hourglass"></div>
<p>Hourglass</p>
</div>
<div class="box">
<div class="loader1"></div>
<p>Loader 1</p>
</div>
<div class="box">
<div class="loader2"></div>
<p>loader 2</p>
</div>
<div class="box">
<div class="loader3"></div>
<p>loader 3</p>
</div>
<div class="box">
<div class="loader4"></div>
<p>loader 4</p>
</div>
<div class="box">
<div class="loader5"></div>
<p>loader 5</p>
</div>
<div class="box">
<div class="loader6"></div>
<p>loader 6</p>
</div>
<div class="box">
<div class="loader7"></div>
<p>loader 7</p>
</div>
<div class="box">
<div class="loader8"></div>
<p>loader 8</p>
</div>
<div class="box">
<div class="loader9"></div>
<p>loader 9</p>
</div>
<div class="box">
<div class="loader10"></div>
<p>loader 10 </p>
</div>
</div>
</body>
</html>< 결과 >
Clock
Hourglass
Loader 1
loader 2
loader 3
loader 4
loader 5
loader 6
loader 7
loader 8
loader 9
loader 10
2. 사용자 정의 속성 (custom properties)
CSS의 속성 값을 재사용하고 동적으로 변경할 수 있게 해주는 기능입니다.
[정의]
:root {
--main-color: #FF0000;
--font-size:15px;
}
[사용방법]
.box{
background-color : var(--main-color)
font-size : var(--font-size)
}< 예시 코드 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 변수</title>
<style>
:root {
--background-color : deeppink;
--text-color : white;
}
.first-list {
background-color: var(--background-color);
color: var(--text-color);
}
.second-list {
background-color: var(--background-color);
color: var(--text-color);
}
@media screen and (max-width:768px) {
:root{
--background-color : darkslateblue;
--text-color-- : ivory;
}
}
</style>
</head>
<body>
<ul class="first-list">
<li>김사과</li>
<li>반하나</li>
</ul>
<ul class="second-list">
<li>오렌지</li>
<li>이메론</li>
<li>배애리</li>
</ul>
</body>
</html>< 결과 >
- 김사과
- 반하나
- 오렌지
- 이메론
- 배애리
'HTML과 CSS > CSS' 카테고리의 다른 글
| CSS - 2D 효과 추가(Transform, Transition) (0) | 2023.10.25 |
|---|---|
| CSS - 우선순위 (0) | 2023.10.24 |
| CSS - 반응형 웹, 미디어 쿼리(모바일 버전, 태블릿 버전, pc버전) (0) | 2023.10.23 |
| CSS - 수평 배치(float, flex), 겹쳐서 출력 (1) | 2023.10.22 |
| CSS - 위치지정(static, relative, fixed, sticky, absolute) (1) | 2023.10.21 |
'HTML과 CSS/CSS' Related Articles
more
