네카라쿠배 프론트엔드 취업완성 스쿨 2기 [Chapter.18] (애니메이션&다단)
01.애니메이션 ( animations ) 개요
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: 애니메이션이름 지속시간 [타이밍함수 대기시간 반복횟수 반복방향 전후상태 재생/정지];
애니메이션 이름은 아래에있는 @keyframes hello 부분을 말하는것임
.box{
width:100px;
height:100px;
background:tomato;
animation:hello 2s linear infinite both;
}
@keyframes hello{
0% {width:200px;}
100% {width:50px;}
}
02.Keyframes rule
2개 이상의 애니메이션 중간 상태(프레임) 을 지정
@keyframes 애니메이션이름 {
0% {속성:값;}
50% {속성:값;}
100% {속성:값;}
}
@keyframes move-box{
0% {left:100px;}
100% {top: 200px;}
}
예시
CSS
.box{
width:100px;
height:100px;
background:tomato;
border-radius:10px;
/* 모서리를 10 px 깎음 */
}
.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;
}
}
03.애니메이션 속성 - animation-name,animation-duration
animation- name
@keyframes 규칙(애니메이션 프레임)의 이름을 지정 (개별속성)
| 값 | 의미 | 기본값 |
| none | 애니메이션을 지정하지 않음 | none |
| @keyframes 이름 | 이름이 일치하는 @keyframes 규칙의 애니메이션을 적용 |
animation-duration
애니메이션의 지속시간 설정
| 값 | 의미 | 기본값 |
| 시간 | 지속시간을 설정 | 0s |
s,ms 단위 사용 가능
04.animation -timing function, animation-delay
| 값 | 의미 | 기본값 | Cubic Beizer 값 |
| 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, 0.58,1) | |
| cubic-bezier(n,n,n,n) | 자신만의 값을정의 (0~1) | ||
| steps (n) | n번 분할된 애니메이션 |
animation-delay
애니메이션 대기 시간 설정(개별속성)
| 값 | 의미 | 기본값 |
| 시간 | 대기시간을 설정 | 0s |
음수가 허용됨 , (음수가 있을 경우 애니메이션은 바로 시작되지만, 그 값만큼 애니메이션이 앞서 시작함 ( 애니메이션 주기 도중에 시작)
예시
CSS 코드
.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;
animation-timing-function:linear;
animation-delay:0s;
/* animation:size-up 1s 2 alternate linear;
기본값은 linear 자리에 ease 이지만 linear 사용시
같은속도로 박스가 올라갔다가 내려가게됨*/
}
.box2:hover{
animation:size-up 1s 2 alternate;
animation-timing-function:linear;
animation-delay:1s;
/* 딜레이를만들어서 1초 뒤에 실행됨 */
}
.box3:hover{
animation:size-up 1s 2 alternate;
animation-timing-function:linear;
animation-delay:-1s;
}
@keyframes size-up{
0%{
width:150px;
}
100%{
width:500px;
}
}
개별 속성
.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 0s linear;
animation-timing-function:linear;
animation-delay:0s;
/* animation:size-up 1s 2 alternate linear;
기본값은 linear 자리에 ease 이지만 linear 사용시
같은속도로 박스가 올라갔다가 내려가게됨*/
}
.box2:hover{
animation:size-up 1s 2 alternate linear 1s ;
/* duration인 1s 부분과 delay 인 뒤에숫자 초의 순서만 뒤바뀌지 않는다면 문제는 없다.*/
animation-timing-function:linear;
animation-delay:1s;
/* 딜레이를만들어서 1초 뒤에 실행됨 */
}
.box3:hover{
animation:size-up 1s -1s linear 2 alternate;
animation-timing-function:linear;
animation-delay:-1s;
}
@keyframes size-up{
0%{
width:150px;
}
100%{
width:500px;
}
}
1초가 적용된 box2의 경우는 1초뒤에 파란색박스가 늘어나기 시작하고 ,
-1초가 적용된 box3의 경우는 앞부분에 늘어나는 부분이 1 초 시작하기때문에 내려오게된다.
05.애니메이션 속성 - animation-iteration-count, animation-direction
animation-iteration-count
애니메이션의 반복횟수를 설정 (개별속성)
| 값 | 의미 | 기본값 |
| 숫자 | 반복 횟수를 설정 | 1 |
| infinite | 무한 반복 |
animation-direction
애니메이션의 반복 방향을 설정 (개별 속성)
| 값 | 의미 | 기본값 |
| normal | 정방향만 반복 | normal |
| reverse | 역방향만 반복 | |
| alternate | 정방향에서 역방향으로 반복 ( 왕복) | |
| alternative-reverse | 역방향에서 정방향으로 반복 (왕복) |
CSS 코드
.box{
width:100px;
height:100px;
background:tomato;
border-radius:10px;
margin:30px;
animation:movemove 2s;
animation-timing-function:linear;
animation-iteration-count: 2;
animation-direction:alternate-reverse;
/* alternate를 쓰면 횟수를 1개 추가한다는느낌임
iteration-count에 따라 정방향으로 한번회전할지
역방향으로 헌번회전할지 횟수에 따라 정해지게됨*/
}
@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);
}
}
06.애니메이션 속성 - animation-fill-mode
animation - fill - mode
애니메이션의 전후 상태(위치)를 설정 (개별속성)
| 값 | 의미 | 기본값 |
| none | 기존 위치에서 시작-> 애니메이션 시작 위치로 이동-> 동작-> 기존위치에서 끝 |
none |
| forwards | 기존 위치에서 시작-> 애니메이션 시작 위치로 이동-> 동작-> 애니메이션 끝위치에서 끝 |
|
| backwards | 애니메이션 시작위치에서 시작-> 동작-> 기존 위치에서 끝 | |
| both | 애니메이션 시작위치에서 시작-> 동작->애니메이션 끝 위치에서 끝 |
07.애니메이션 속성 - animation-play-state
애니메이션의 재생과 정지를 설정 ( 개별속성)
| 값 | 의미 | 기본값 |
| running | 애니메이션을 동작 | running |
| paused | 애니메이션 동작을 정지 |
justify-content: 수평 정렬
aling-items: 수직 정렬
08. 다단(Multi Columns)
일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며, 가독성 확보
columns
다단을 정의 (단축 속성)
| 값 | 의미 | 기본값 |
| auto | 브라우저가 단의 너비와 개수를 설정 | auto |
| column-width | 단의 최적 너비를 설정 | |
| column-count | 단의 개수를 설정 |
columns: 너비 개수;
.text{
columns:100px 2;
}
columns-width
단의 최적 너비를 설정 (개별 속성 )
| 값 | 의미 | 기본값 |
| auto | 브라우저가 단의 너비를 설정 | auto |
| 단위 | px,em,cm 등 단위로 지정 |
column-width: 너비;
각 단이 줄어들 수 있는 최적 너비(최소너비) 를 설정하며, 요소의 너비가 가변하여 하나의 단이 최적 너비보다 줄어들 경우 단의 개수가 조정된다.
column-count
단의 개수를 설정 ( 개별속성)
| 값 | 의미 | 기본값 |
| auto | 부라우저가 단의 개수를 설정 | auto |
| 숫자 | 단의 개수를 설정 |
column-count: 개수;
column-gap
단과 단 사이의 간격 설정
| 값 | 의미 | 기본값 |
| normal | 브라우저가 단과 단 사이의 간격을 설정(1em) | normal |
| 단위 | px,em,cm등 단위로 지정 |
1em : 폰트사이즈 :16px 일때 단과단사이의 거리: 16px;
column-gap: 간격;
column-rule
단과 단 사이의 (구분) 선을 지정 (단축속성)
| 값 | 의미 | 기본값 |
| column-width | 선의 두께를 지정 | medium |
| column-style | 선의 종류를 지정 | none |
| column-color | 선의 색상을 지정 | 요소의 글자색과 동일 |
column-rule: 두께 종류 색상;
구분선(column-rule) 은 단과 단 사이의 간격 중간에 위치함.
