CSS 애니메이션
1. 전환(transition)
: 시간에 따른 상태를 지정하는 애니메이션- 필수 속성
전환 속성값
전환 시간 - 선택 속성
전환 타이밍
전환 지연
전환 속성값(transition-property)
: 전환될 속성을 지정개별 속성 또는 전체(all) 속성에 지정 가능
전환 시간(transition-duration)
: 전환을 시작해서 끝날 때까지의 시간을 지정s, ms 지정 가능
전환 타이밍(transition-timing-function)
: 전환이 이루어지는 시점을 지정linear, ease(기본값), ease-in, ease-out, ease-in-out, step-start, step-end
전환 지연(transition-delay)
전환이 시작되는 시기를 지정2. 변형(transform)
회전(rotation)
: 지정된 각도(deg)만큼 요소를 시계(양수) 또는 반시계(음수) 방향으로 회전시킴 transform: rotate(deg)
기울이기(skew)
: 요소의 X축과 Y을 제공된 값에 따라 기울임 transform: skew(deg)
skew/ skewX/ skewY
크기(scale)
: 요소 크기를 늘리거나(>1) 줄임(<1) transform: scale(n)
transform: scale(n m)
scale/ scaleX/ scaleY
이동(translate)
: 요소를 상하좌우로 이동, 주어진 값이 양수이면 양의 방향, 음수이면 음의 방향으로 이동transform: translate()
translate/ translateX/ translateY
*애니메이션은 지정한 요소의 형제 요소에는 영향을 미치지 않음
3. 키프레임(keyframe)
@keyframes animationname {keyframes-selector {css-styles;}}
애니메이션은 개수 제한없이 키프레임 형성 가능
- 백분율(0-100%) 지정 방식
- from to 지정 방식
깃/깃허브
깃 : 문서나 소스 코드 같은 파일의 변경 이력을 관리해주는 시스템, 코드 버전 관리 소프트웨어
깃허브 : 협업 및 버전 관리에 사용되는 소스 코드 호스팅 플랫폼, 깃을 SaaS(Software as a Service) 형태로 제공
