CSS animation
@keyframes
- 애니메이션 이름과 함께 단계별 상태를 정의
.box:hover {
animation: grow-shrink 2s;
}
/* 애니메이션 정의 */
@keyframes grow-shrink {
0% {
width: 100px;
background: greenyellow;
}
50% {
width: 500px;
background: orange;
}
100%{
width: 300px;
background: violet;
}animation-name
- 이름이 일치하는 @keyframes 규칙의 애니메이션을 지정
animation-duration
- 애니메이션이 한 사이클을 완료하는데 걸리는 시간을 지정 (지속시간, 기본값 0s)
animation-timing-function
- 타이밍 함수를 사용하여 좀더 세밀한 애니메이션 전환효과 지정
cf ) transition timing function 참고
animation-delay
- 애니메이션이 시작할 시점을 대기 시간을 설정해 지정 (기본값 0s)
animation-iteration-count
- 애니메이션의 반복 횟수 설정 (기본값 1)
infinite : 무한 반복
animation-direction
- 애니메이션 재생 방향 지정
- alternate, alternate-reverse 는 최소 2회 이상이어야 적용됨
- @keyframes 에서 설정한 0% → 100% 가 정방향 (100% → 0% 역방향)
| 값 | 의미 |
| normal | 정방향만 반복 (기본값) |
| reverse | 역방향만 반복 |
| alternate | 정방향에서 역방향으로 반복(왕복) |
| alternate-reverse | 역방향에서 정방향으로 반복(왕복) |
** alternate 시계방향(정)→반시계(역) → 반복..
** alternate-reverse 반시계방향(역)→시계(정) → 반복..
위 gif의 코드
더보기
.box {
width: 100px;
height: 100px;
background: tomato;
margin: 30px;
text-align: center;
animation: rotation 2s linear 2;
animation-direction: alternate-reverse;
}
@keyframes rotation {
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
- 애니메이션 실행 전과 후 대상에 스타일 적용하는 방법 지정
** 아래에서 위로 올라오는 애니메이션을 적용하려면?
fillmode → backwards 적합 (아래 위치에서 시작 → 기존위치로 끝남)
| 값 | 의미 |
| none | 기존 위치에서 시작 → 애니메이션 시작 위치 이동 → 애니메이션 동작 → 기존 위치에서 종료 |
| forwards | 기존 위치에서 시작 → 애니메이션 시작 위치 이동 → 애니메이션 동작 → 애니메이션 끝 위치에서 종료 |
| backwards | 애니메이션 시작 위치에서 시작 → 애니메이션 동작 → 기존 위치에서 종료 |
| both | 애니메이션 시작 위치에서 시작 → 애니메이션 동작 → 애니메이션 끝 위치에서 종료 |
더보기
.box {
width: 100px;
height: 100px;
background: coral;
margin: 30px;
animation: moving 2s 1s;
/* animation-fill-mode: none; */
/* animation-fill-mode: forwards; */
/* animation-fill-mode: backwards; */
/* animation-fill-mode: both; */
}
@keyframes moving {
from {
background: dodgerblue;
transform: translate(100px, 100px);
}
to {
background: yellowgreen;
transform: translate(300px, 100px);
}
}
animation-play-state
- 애니메이션의 재생과 정지를 설정
- running 애니메이션 동작 (기본값)
- paused 애니메이션 동작 정지
단축속성 - animation
- animation: 이름 지속시간 [타이밍함수 대기시간 ... 재생정지 등];
- 지속시간 duration이 먼저 대기시간 delay 나중
** 이미 만들어놓은 애니메이션을 활용해도 좋음
Animate.css | A cross-browser library of CSS animations.
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
animate.style
CSS Flexbox
수평 레이아웃을 만드는 강력한 기능 flex box
- 요소들은 기본적으로 블록 개념이 많아서 자동으로 수직으로 쌓이기 때문에 수직 레이아웃에 대해서는 큰 불편을 느끼지 않습니다.
- 그러나 요소를 가로로 배치하는 수평 레이아웃의 경우 CSS를 사용하는 개발자들에게 큰 고통을 선사합니다.
flex의 핵심 개념 2가지
flex Container 에 적용하는 속성
| 속성명 | 의미 |
| display | flex container 정의 |
| flex-direction | flex itemss 의 주 축을 설정 |
| flex-wrap | flex items의 줄 바꿈을 설정 |
| flex-flow | flex-direction 과 flex-wrap의 단축 속성 |
| justify-content | 주 축의 정렬 방법을 설정 (2줄 이상) |
| align-content | 교차 축의 정렬 방법을 설정 (2줄 이상) |
| align-items | 교차 축에서 items의 정렬 방법을 설정 (1줄) |
display
flex-direction
주 축(main-axis)과 교차 축(cross-axis), 시작점과 끝점
flex-wrap
float 처럼 아이템의 너비는 유지하면서 한 줄이 꽉 차면 아래로 떨어지게 함
단축속성 : flex-flow
- flex-direction과 flex-wrap의 단축 속성
flex-flow: row-reverse nowrap;
justify-content
- 주축의 정렬 방법을 설정
- flex-direction: column 과 사용 시 Y축을 기준으로 정렬
| 값 | 의미 |
| flex-start | items를 시작점부터 정렬 (기본값) |
| flex-end | items를 끝점부터 정렬 |
| center | items를 가운데 정렬 |
| space-between | 양 끝을 기준으로 고르게 정렬 |
| space-around | items를 균등한 여백을 포함하여 정렬 (여백+여백으로 인해 1:2 비율 존재) |
| space-evenly | 모든 여백이 균등하게 정렬 |
** 상기의 표는 flex 정렬 속성 align-content, align-items 에서도 사용
align-content
- 교차 축의 정렬 방법을 설정
- 주의할 점은 flex-wrap 속성을 통해 items가 2줄 이상이고 여백이 있을 경우 사용 가능
- stretch : 교차 축을 채우기 위해 items를 늘림 (기본값)
align-items
- 교차 축의 정렬 방법을 설정
- 한 줄일 경우 많이 사용, container에 align-content 속성이 없거나 기본값이어야 함
- stretch : 교차 축을 채우기 위해 items를 늘림 (기본값)
- baseline : items를 문자 기준선에 정렬
Flex Item
item, 즉 flex 대상에게 적용하는 속성
| 값 | 의미 |
| order | flex item의 순서를 설정 |
| flex-grow | flex item의 증가 너비 비율을 설정 (기본값 0) |
| flex-shrink | flex item의 감소 너비 비율을 설정 (기본값 1) |
| flex-basis | flex-grow, flex-shrink, flex-basis의 단축 속성 (기본값 auto) |
| align-self | 교차 축에서 item의 정렬 방법을 설정 |
order
- 숫자가 클수록 순서가 밀림
- 음수 사용 가능
flex-grow, flex-basis, 단축 속성 : flex
- item의 공간 배분 전 기본 너비를 flex-basis로 설정
- 보통 0으로 설정 후 flex-grow를 사용하거나 flex 로 비율 설정 (이미 flex-basis 0으로 설정)
align-self
- 교차축에서 개별 item의 정렬 방법을 설정
- align-items 속성보다 우선함
