CSS - 속성 - 애니메이션 & 다단

1. 애니메이션 개요

: 요소에 애니메이션을 설정/제어

값	의미	기본값
animation-name	@keyframse규칙의 이름을 지정	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 linear infinite both;
}

@keyframes hello{
  0% { width: 200ps; }
  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: 500px;
  }
}

 

 

---

2. @keyframes 

: 2개 이상의 애니메이션 중간 상태(프레임)을 지정

@keyframes 애니메이션이름{
  0% {속성: 값;}
  50% {속성: 값;}
  100% {속성: 값;}
}

@keyframes move-box{
  0% { left:100px;}
  100% { top:200px;}
}

 

---

3. 애니메이션 속성 -  animation-name, animation-duration

-1) animation-name 

: @keyframes 규칙(애니메이션 프레임)의 이름을 지정

값	의미	기본값
none	애니메이션을 지정하지 않음	none
@keyframes 이름	이름이 일치하는 @keyframes규칙의 애니메이션을 적용

 

-2) animation-duration

: 애니메이션의 지속시간 설정

값	의미	기본값
시간	지속 시간을 설정	0s

 

                                           

---

4. 애니메이션 속성 - animation-timing, animation-delay

-1) animation-timing-function

: 타이밍 함수(애니메이션 효과를 계산하는 방법) 지정

값	의미	기본값	cubic Bezier 값
ease	빠르게-느리게	ease	cubic-bezier(0.25, 0.1, 0.25, 1)
linear	일정하게		cubic-bezier(0, 0, 1, 1)
ease-in	느리게-빠르게		cubic-bezier(0.42, 0, 1, 1)
ease-out	빠르게-느리게		cubic-bezier(0, 0, 0.58, 1)
ease-in-out	느리게-빠르게-느리게		cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier(n,n,n,n)	자신만의 값을 정의(0~1)
steps	n번 분할된 애니메이션

 

-2) 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;
  color: white;
  font-size:24px;
  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 linear 0s;
}
.box2:hover{
  animation: size-up 1s 2 alternate linear 1s;
}
.box3:hover{
  animation: size-up 1s 2 alternate linear -1s;
}

@keyframes size-up{
  0% {
    width: 150px;
  }
  100%{
    width: 500px;
  }
}

- duration의 초값은 duration의 초값보다 뒤에 써야한다.

 

---

5. 애니메이션 속성 - animation-iteration-count, animation-direction

-1) animation-iteration-count

: 애니메이션의 반복 횟수를 설정

값	의미	기본값
숫자	반복 횟수를 설정	1
infinite	무한 반복

 

-2) 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 2 alternate;
}
@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);
  }
}

 

---

6. 애니메이션 속성 - animation-fill-mode

: 애니메이션의 전후 상태(위치) 설정

값	의미	기본값
none	기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 기존 위치에서 끝	none
forwards	기존 위치에서 시작 -> 애니메이션 시작 위치로 이동 -> 동작 -> 애니메이션 끝 위치에서 끝
backwards	애니메이션 시작 위치에서 시작 -> 동작 -> 기존 위치에서 끝
both	애니메이션 시작 위치에서 시작 -> 동작 -> 애니메이션 끝 위치에서 끝

<div class="box"></div>

.box{
  width: 100px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  margin: 30px;  
  animation: movemove 2s 2s;
  animation-fill-mode: both;
}

@keyframes movemove{
  0%{
    transform: translate(100px,100px);
    background:dodgerblue;
  }
  100%{
    transform: translate(300px,100px);
    background: yellowgreen;
  }
}

 

---

7. 애니메이션 속성 - animation-play-state

: 애니메이션의 재생과 정지 설정

값	의미	기본값
running	애니메이션을 동작	running
paused	애니메이션 동작을 정지

 

- 가상요소 선택자를 사용한 content내용 변경

<div class="box"></div>

body{
  padding: 20px;
}
.box{
  width: 150px;
  height: 100px;
  background: tomato;
  border-radius: 10px;
  margin: 30px;  
  animation: size-up 3s linear infinite alternate;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box::before{
  content:"running";
  font-size: 20px;
  color: white;
  font-weight: bold;
}
.box:hover{
  animation-play-state: paused;
  background: dodgerblue;
  
}
.box:hover::before{
  content:"paused";
}

@keyframes size-up{
  0%{
    width: 150px;
  }
  100%{
    width: 100%;
  }
}

---

8. 다단(Multi Columns)

: 일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보

★columns : 다단을 정의

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
column-width	단의 최적 너비를 설정	auto
column-count	단의 개수를 설정	auto

columns: 너비 개수;

.text{
  columns: 100px 2;
}

 

-1) column-width : 단의 최적(최소) 너비를 설정

• 각 단이 줄어들 수 있는 최적너비(최소 너비)를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정된다.

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
단위	px, em, cm 등 단위로 지정	auto

 

-2) column-count :단의 개수를 설정

값	의미	기본값
auto	브라우저가 단의 너비와 개수를 설정	auto
숫자	단의 개수를 설정

column-count: 개수;

 

-3) column-gap :  단과 단 사이의 간격 설정

값	의미	기본값
normal	브라우저가 단과 단 사이의 간격을 설정(1em)	normal
단위	px, em, cm등 단위로 지정

column-gap : 간격;

 

-4) column-rule: 단과 단 사이의 (구분)선을 지정

값	의미	기본값
column-width	선의 두께를 지정	medium
column-style	선의 종류를 지정	none
column-color	선의 색상을 지정	요소의 글자색과 동일

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;
}