✔ 애니메이션(animation)
CSS의 애니메이션(animation) 은 트랜지션을 활용하는 것보다 더 쉽게 애니메이션을 만들 수 있다.
animaition 속성은 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 애니메이션이 바뀌는 특정 지점을 키프레임(keyframe)이라고 한다.
CSS의 애니메이션(animation)의 이점
1. JavaScript를 모르더라도 간단하게 애니메이션을 만들 수 있다.
- JavaScript를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있지만 CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링된다.
- 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있다.
출처:https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations
⭐ animation의 속성
| 종류 | 설명 |
|---|---|
| @keyframes | 애니메이션이 바뀌는 지점 지정 |
| animation-delay | 애니메이션의 시작 부분을 얼마나 지연할지 지정 |
| animation-direction | 애니메이션을 종료한 뒤 처음부터 시작할 지, 역방향으로 진행할지 지정 |
| animation-duration | 애니메이션의 진행 시간을 지정 |
| animation-iteration-count | 애니메이션의 반복 횟수 지정 |
| animation-name | 어떤 애니메이션을 사용할 지 지정 |
| animation-timing-function | keyframe의 전환 형태를 지정 |
| animation | animation 속성을 한꺼번에 묶어 지정 |
⭐ @keyframes
@keyframes 속성은 애니메이션이 바뀌는 지점 지정하는 속성이다.
예를 들어 애니메이션의 중간 지점을 추가하려면 50% 위치에 키프레임을 추가하면 된다. 시작과 끝 위치만 사용하려면 0%, 100%와 같은 값 대신 from과 to라는 키워드를 사용해도 된다.
💡 기본형
@keyframes <이름> {
<선택자> { <스타일> }
}🔎예시
@keyframe ani {
0% {width: 10px}
100% {width: 100px}
}@keyframes ani {
from {
width: 10px;
}
to {
width: 100px;
}
}⭐ animation-name
animation-name 속성으로 어떤 애니메이션을 사용할 지 지정한다.
💡 기본형
animation-name: <keyframe 이름> | none⭐ animation-duration
animation-duration 속성은 애니메이션을 얼마동안 재생할 것인지 지정한다.
💡 기본형
animation-duration: <시간> /* 시간의 단위는 초(s) 또는 밀리초(ms) */⭐ 예시 - 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>background-size</title>
<style>
p {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
</head>
<body>
<h2> 패션의 문화별 차이 </h2>
<p> 문화마다 허용되는 패션과 금기시되는 패션은 서로 다를 수 있다.
아시아권 국가에서 타이츠는 반 속옷에 가깝게 여겨지지만, 러시아와 동 · 북유럽 일부 국가들에서 타이츠는 청소년들의 유니섹슈얼한 겨울나기 복식이며, 영미권 여성들에게 타이츠는 바지 대용으로 여겨지기도 한다. 또한 같은 복장이라도 문화마다 그 맥락과 의미가 다를 수도 있다.
한편 기후 풍토에 의해 패션이 반강제로(?) 정해지기도 하는데, 풍문에 따르면 제국주의 시대 때 선교사들이 아프리카와 남미 오지에서 현지인들에게 강제로 서양식 복식을 입히려고 시도했다가 피부병이 돌고 거하게 실패했다는 이야기도 있다. 습기가 높고 젖기 쉬운 환경 때문에, 피부병이 발생했다는 이야기. 또한 옷이 생경하기 때문에 세탁에 민감하지 않은 탓도 있었을 것이다. 이런 케이스에서는 옷이라는 개념 대신 피부에 물감 등으로 치장을 하거나 문신을 하는 경우도 있다. 이런 경우는 민족적 표지(ethnic marker)라고 부르는데, 옷을 입기 쉽지 않은 환경에서 내부인과 외부인을 식별하기 위한 용도다.
종교나 인습에 의해서 패션이 고정될 수도 있다. 일례로 중동 지역에서는 차도르, 부르카, 니캅 등 여성의 신체를 가급적 보여주지 않은 채 검은 천으로 온몸을 휘감는다. 이런 패션은 이슬람권 국가 사이에서도 논란이 있다.[12] 과거 청교도들도 금욕을 위해 온몸에 걸칠 옷들을 전부 회색으로 통일하기도 했다.
하지만 세월이 흐르면서 문화별 패션 차이는 많이 완화되고 있는 편이다.
</p>
</body>
</html>
⭐ animation-direction
animation-direction 속성은 애니메이션의 방향을 지정하는 속성이다. 기본적으로는 from에서 to로 진행하지만 animation-direction을 사용하면 진행하는 방향을 바꿀 수 있다.
💡 기본형
animation-direction: normal | reverse | alternate | alternate-reverse💡 animation-direction 속성값
| 종류 | 설명 |
|---|---|
| normal (기본값) | 애니메이션을 from에서 to로 진행한다. |
| reverse | 애니메이션을 to에서 from으로 진행한다. 즉, 원래 방향과 반대로 진행. |
| alternate | 홀수 번째는 normal로, 짝수 번째는 reverse로 진행한다. |
| alternate-reverse | 홀수 번째는 reverse로, 짝수 번째는 normal로 진행한다. |
⭐ animation-iteration-count 속성
animation-iteration-count 속성은 상황에 따라 애니메이션을 몇 회 반복할 지 지정하는 속성이다.
💡 기본형
animation-iteration-count: <숫자> | infinite💡 animation-iteration-count 속성값
| 종류 | 설명 |
|---|---|
| 숫자 | 애니메이션의 반복 횟수 지정 |
| infinite | 애니메이션을 무한 반복 |
⭐ animation-timing-function 속성
animation-timing-function 속성은 트랜지션에서 설명했듯이 애니메이션의 시작, 중간, 끝의 재생 속도를 지정할 수 있다.
💡 기본형
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)⭐ 모든 애니메이션 속성을 한 번에 표기하는 animation 속성
animation 속성은 transition 속성처럼 모든 애니메이션 속성을 한꺼번에 표기할 수 있
도록 해준다.
애니메이션 속성들을 사용할 때 주의해야 할 점
주의해야할 점은 animation-duration 속성을 반드시 표기해야한다는 점이다. 애니메이션 실행 시간을 지정하지 않으면 기본값인 0이 되어 재생이 되지 않는다.
💡 기본형
animation: <animation-name> | <animation-duration> | <animation-timing-function> |
<animation-delay> | <animation-iteration-count> | <animation-direction> |⭐ 예시 - 1
동전 애니메이션
애니메이션 출처 - https://animista.net/play/basic/flip-scale/flip-scale-up-hor
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.coin {
position: relative;
}
.front {
width: 230px;
height: 230px;
border-radius:50%;
background:url("images/500_front.png") center 100% no-repeat;
position:absolute;
animation: flip-scale-up-hor 6s infinite;
top: 300px;
left: 50%;
}
.back {
width: 230px;
height: 230px;
border-radius:50%;
background:url("images/500_back.png") center 100% no-repeat;
position:absolute;
backface-visibility: hidden;
animation: flip-scale-up-hor 6s infinite;
top: 300px;
left: 50%;
}
@keyframes flip-scale-up-hor{
0% {
transform: scale(1) rotateX(0);
transform: scale(1) rotateX(0);
}
50% {
transform: scale(2.5) rotateX(-1080deg);
transform: scale(2.5) rotateX(-1080deg);
}
100% {
transform: scale(1) rotateX(-2160deg);
transform: scale(1) rotateX(-2160deg);
}
}
</style>
</head>
<body>
<div class="coin">
<div class="front">
</div>
<div class="back">
</div>
</div>
</body>
</html>
출처: 고경희(2021), "베스트셀러Do it! HTML+CSS+자바스크립트 웹 표준의 정석", 이지스 퍼블리싱
