SGV
스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식입니다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능합니다.
- 1. 인터넷 익스플로러9 버전 이상부터 지원됩니다.
- 2. XML을 이용하여 라인, 곡선, 기하학적인 그래픽 표현이 가능합니다.
- 3. 벡터 방식이기 때문에 확대하거나 축소가 가능합니다.
- 4. DOM 단위로 컨트롤이 가능하지만 문서 복잡도가 증가되면 렌더링이 느려집니다.
시작하기에 앞서 SGV Intro에 대한 내용은 여기를 클릭해주세요.
animation
animation : name | duration | timing-function | delay | iteration | direction | fill-mode | play-state
| 종류 | 예시 |
|---|---|
| animation-name | @keyframe에 지정된 이름을 설정합니다. |
| animation-duration | 애니메이션이 실행되는 시간을 설정합니다. |
| animation-timing-function | 애니메이션 키프레임 움직임을 설정합니다. |
| animation-delay | 애니메이션이 시작되기 전까지 시간을 설정합니다. |
| animation-iteration | 애니메이션 반복 횟수를 설정합니다. |
| animation-derection | 애니메이션 방향을 설정합니다. |
| animation-fill-mode | 애니메이션 끝나고 난 뒤 어떤 값을 적용할지 설정합니다. |
| animation-play-state | 애니메이션 실행 상태를 설정합니다. |
transtion
transtion : property | durtion | timing-function | delay
| 종류 | 예시 |
|---|---|
| transition-property | 트렌지션을 적용할 CSS 속성 대상을 설정합니다. |
| transition-druation | 트렌지션 작동시간을 설정합니다. |
| transition-timing-function | 트렌지션 움직임 효과를 설정합니다. |
| transition-delay | 트렌지션이 시작되기 전까지 시간을 설정합니다. |
timing-function
| 종류 | 예시 |
|---|---|
| linear | 일정한 간격으로 설정합니다. |
| ease | 처음에는 서서히 가속하고 마지막 부분에서 급격히 감속합니다. |
| ease-in | 처음에는 천천히 시작하고 마지막에 가속합니다. |
| ease-out | 처음에는 최대 속도로 시작하고 마지막에 감속합니다. |
| ease-in-out | 처음에는 제로 속도로 시작하고, 중간 지점에서 최고 속도로 움직이고, 마지막 부분에서 서서히 감속합니다. |
| step-start | 애니메이션을 시작점에서 설정합니다. |
| step-end | 애니메이션을 끝점에서 설정합니다. |
| steps(int, start/end) | 애니메이션을 단계별을 설정합니다. |
| cubic-bezier(n,n,n,n) | 버지니아 곡선 값을 만들어서 설정합니다. |
timing-function
border-radius
linear
ease
ease-in
ease-out
ease-in-out
.timing1.show {animation: move 2s 1 linear;}
.timing2.show {animation: move 2s 1 ease;}
.timing3.show {animation: move 2s 1 ease-in;}
.timing4.show {animation: move 2s 1 ease-out;}
.timing5.show {animation: move 2s 1 ease-in-out;}
@keyframes move {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
timing-function
border-radius
step-start
step-end
steps(4, start)
steps(4, end)
steps(10, start)
steps(10, start)
.timing6.show {animation: move 4s 1 step-start;}
.timing7.show {animation: move 4s 1 step-end;}
.timing8.show {animation: move 4s 1 steps(4, start);}
.timing9.show {animation: move 4s 1 steps(4, end);}
.timing10.show {animation: move 4s 1 steps(10, start);}
.timing11.show {animation: move 4s 1 steps(10, end);}
cubic-bezier
border-radius
timing12
timing13
timing14
timing15
timing16
.timing12.show {animation: move 3s 2 cubic-bezier(0,.71,0,1);}
.timing13.show {animation: move 3s 2 cubic-bezier(0,.71,1,-0.28);}
.timing14.show {animation: move 3s 2 cubic-bezier(1,-0.52,1,-0.28);}
.timing15.show {animation: move 3s 2 cubic-bezier(1,.02,0,1.01);}
.timing16.show {animation: move 3s 2 cubic-bezier(.33,2.04,1,2.05);}
animation-delay
border-radius
timing17
timing18
timing19
timing20
.timing17.show {animation: move 3s 0.1s 2 ease;}
.timing18.show {animation: move 3s 0.2s 2 ease;}
.timing19.show {animation: move 3s 0.3s 2 ease;}
.timing20.show {animation: move 3s 0.4s 2 ease;}
animation-iteration-count
animation-iteration-count
timing21
timing22
timing23
timing24
.timing21.show {animation: move 1s 1 ease;}
.timing22.show {animation: move 1s 2 ease;}
.timing23.show {animation: move 1s 3 ease;}
.timing24.show {animation: move 1s infinite ease;}
animation-direction
animation-direction
timing25
.timing25.normal {animation: move2 4s 5 ease normal;}
.timing26.reverse {animation: move2 4s 5 ease reverse;}
.timing27.alternate {animation: move2 4s 5 ease alternate;}
.timing28.alternate-reverse {animation: move2 4s 5 ease alternate-reverse;}
animation-fill-mode
animation-direction
timing26
timing27
timing28
timing29
.timing26.show {animation: move3 3s 1 ease; animation-fill-mode: none;}
.timing27.show {animation: move3 3s 1 ease; animation-fill-mode: forwards;}
.timing28.show {animation: move3 3s 1 ease; animation-fill-mode: backwards;}
.timing29.show {animation: move3 3s 1 ease; animation-fill-mode: both;}
@keyframes move3 {
0% {left: 0%;}
100% {left: calc(100% - 120px);}
}
animation-play-state
animation-direction
timing31
.timing30.running {animation: move2 4s 100 ease; animation-play-state: running;}
.timing30.paused {animation: move2 4s 100 ease; animation-play-state: paused;}
Animatine.css
animation-direction
timing31
timing32
timing33
timing34
timing35
timing36
timing37