[CSS] CSS 속성 - 애니메이션, 다단
CSS 속성 - 애니메이션, 다단
애니메이션
animation
요소에 애니메이션을 설정/제어, 단축 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
animation-name | @keyframes 규칙의 이름을 지정 | none |
animation-duration | 애니메이션의 지속 시간 설정 | 0s |
animation-timing-function | 타이밍 함수 지정 | ease |
animation-delay | 애니메이션의 대기 시간 설정 | 0s |
animation-iteration-count | 애니메이션의 반복 횟수 설정 | 1 |
animation-direction | 애니메이션의 반복 방향 설정 | normal |
animation-fill-mode | 애니메이션의 전후 상태(위치) 설정 | none |
animation-play-state | 애니메이션의 재생과 정지 설정 | running |
사용법
animation: 애니메이션이름 지속시간 [ 타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];
.box {
width: 100px;
height: 100px;
background: tomato;
animation: hello 2s liner infinite both;
}
@keyframe hello {
0% { width: 200px; }
100% { width: 50px; }
}
예제
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: tomato;
}
.box:hover {
animation: first-animation 2s infinite alternate;
}
@keyframes first-animation {
0% {
width: 100px;
}
100% {
width: 1000px;
}
}
keyframes rule
2개 이상의 애니메이션 중간 상태(프레임)을 지정
사용법
@keyframes 애니메이션 이름 {
0% { 속성: 값; }
50% { 속성: 값; }
100% { 속성: 값; }
}
@keyframes move-box {
0% { left: 100px; }
100% { top: 200px; }
}
예제
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
}
.box:hover {
animation: my-animation 3s infinite alternate;
}
@keyframes my-animation {
0% {
width: 100px;
background: tomato;
}
75% {
width: 500px;
background: dodgerblue;
}
100% {
width: 300px;
background: yellowgreen;
}
}
animation 개별 속성
animation-name
이 @keyframes 규칙(애니메이션 프레임)의 이름을 지정, 개별 속성을 가짐.
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
none | 애니메이션을 지정하지 않음 | none |
@keyframes 이름 | 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용 |
animation-duration
애니메이션의 지속 시간 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 시간 | 지속 시간을 설정 | 0s |
예제
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
}
.box:hover {
animation-name: my-animation;
animation-duration: 3s; /* 3s = 3000ms */
}
@keyframes my-animation {
0% {
width: 100px;
background: tomato;
}
75% {
width: 500px;
background: dodgerblue;
}
100% {
width: 300px;
background: yellowgreen;
}
}
animation-timing-function
타이밍 함수(애니메이션 효과를 계산하는 방법) 지정, 개별 속성
속성 값
| 값 | 의미 | 기본값 | Cubic Bezier 값 |
|---|---|---|---|
ease | 빠르게-느리게 | ease | cubic-bezier(.25, .1, .25, 1) |
linear | 일정하게 | cubic-bezier(0, 0, 1, 1) | |
ease-in | 느리게-빠르게 | cubic-bezier(.42, 0, 1, 1) | |
ease-out | 빠르게-느리게 | cubic-bezier(0, 0, .58, 1) | |
ease-in-out | 느리게-빠르게-느리게 | cubic-bezier(.42, 0, .58, 1) | |
cubic-bezier(n,n,n,n) | 자신만의 값을 정의(0~1) | ||
steps(n) | n 번 분할된 애니메이션 |
animation-delay
애니메이션의 대기 시간 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 시간 | 대기 시간을 설정 | 0s |
음수가 허용됩니다. 음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작합니다(애니메이션 주기 도중에 시작).
예제
<div class="box box1">0s</div>
<div class="box box2">1s</div>
<div class="box box3">-1s</div>
.box {
width: 150px;
height: 100px;
border-radius: 10px;
margin: 10px;
font-size: 40px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.box1 { background: tomato;}
.box2 { background: dodgerblue;}
.box3 { background: yellowgreen;}
.box1:hover {
animation: size-up 1s 2 alternate;
animation-timing-function: linear;
animation-delay: 0s;
/* animation: size-up 1s 2 alternate linear 0s; */
}
.box2:hover {
animation: size-up 1s 2 alternate;
animation-timing-function: linear;
animation-delay: 1s;
}
.box3:hover {
animation: size-up 1s 2 alternate;
animation-timing-function: linear;
animation-delay: -1s;
}
@keyframes size-up {
0% {
width: 150px;
}
100% {
width: 500px;
}
}
animation-iteration-count
애니메이션의 반복 횟수를 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 숫자 | 반복 횟수를 설정 | 1 |
infinite | 무한 반복 |
animation-direction
애니메이션의 반복 방향을 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 정방향만 반복 | normal |
reverse | 역방향만 반복 | |
alternate | 정방향에서 역방향으로 반복(왕복) | |
alternate-reverse | 역방향에서 정방향으로 반복(왕복) |
예제
<div class="box"></div>
.box {
width: 100px;
height: 100px;
background: tomato;
border-radius: 10px;
margin: 30px;
animation: movemove 2s;
animation-iteration-count: infinite;
animation-timing-function: 2;
animation-direction: reverse; /* 기본값: normal; */
}
@keyframes movemove {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(100px, 0);
}
50% {
transform: translate(100px, 100px);
}
75% {
transform: translate(0, 100px);
}
100% {
transform: translate(0, 0);
}
}
animation-fill-mode
애니메이션의 전후 상태(위치)를 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
none | 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝 | none |
forwards | 기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝 | |
backwards | 애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝 | |
both | 애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝 |
참고
animation-play-state
애니메이션의 재생과 정지를 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
running | 애니메이션을 동작 | running |
paused | 애니메이션 동작을 정지 |
예제
<div class="box"></div>
body{
padding: 20px;
}
.box {
width: 150px;
height: 100px;
background: tomato;
border-radius: 10px;
animation: size-up 3s linear alternate;
display: flex;
justify-content: center;
align-items: center;
}
.box:before {
content: "running";
font-size: 20px;
color: white;
font-weight: 700;
}
.box:hover {
animation-play-state: paused;
background: dodgerblue;
}
.box:hover::before {
content: "paused";
}
@keyframes size-up {
0% {
width: 150px;
}
100% {
width: 100%;
}
}
다단
Multi-Columns
일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보
columns
다단을 정의, 단축 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
auto | 브라우저가 단의 너비와 개수를 설정 | auto |
column-width | 단의 최적 너비를 설정 | auto |
column-count | 단의 개수를 설정 | auto |
사용법
columns: 너비 개수;
.text {
columns: 100px, 2;
}
columns 개별 속성
column-width
단의 최적 너비를 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
auto | 브라우저가 단의 너비를 설정 | auto |
| 단위 | px, em, cm 등 단위로 지정 |
사용법
column-width: 너비;
각 단이 줄어들 수 있는 최적 너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정됩니다.
column-count
단의 개수를 설정, 개별 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
auto | 브라우저가 단의 너비를 설정 | auto |
| 숫자 | 단의 개수를 설정 |
사용법
column-count: 개수;
column-gap
단과 단 사이의 간격 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
normal | 브라우저가 단과 단 사이의 간격을 설정(1em = font-size:16px;) | normal |
| 단위 | px, em, cm 등 단위로 지정 |
사용법
column-gap: 간격;
column-rule
단과 단 사이의(구분) 선을 지정, 단축 속성
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
column-width | 선의 두께를 지정 | medium |
column-style | 선의 종류를 지정 | none |
column-color | 선의 색상을 시정 | 요소의 글자색과 동일 |
사용법
column-rule: 두께 종류 색상;
구분선(
column-rule)은 단과 단 사이의 간격 중간에 위치합니다.
예제
<p>
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
p {
color: red;
text-align: justify;
columns: 150px 3;
column-gap: 20px;
column-rule: 2px solid blue;
}
참고
패스트캠퍼스(박영웅 강사님) : 올인원 패키지 : 프론트엔드 개발 with React.js
개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀 드립니다.
