[개미의 걸음 HTML&CSS 19차시] CSS를 이용한 애니메이션

Transform[변형]

2차원 변형[2D Transform]	웹 요소를 변형시킬 때 단순히 수명이나 수직으로 이동하고 회전하는 것
3차원 변형[3D Transform]	웹 요소를 변형시킬 때 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것 사람쪽에 가까울수록 z축의 값이 더 커지고 사람쪽으로부터 멀어질수록 z축 값이 더 작아짐

 

Transform 속성

선택자 {
          transform : 변형 함수;
}

• 변형을 적용하기 위해 사용하는 속성

 

     변형함수

변 형 함 수	설     명
matrix3d(n, [,n])	4x4 행렬을 이용해 이동과 확대/축소, 회전 등의 변환을 지정
translate(tx, ty)	지정한 크기만큼 x축과 y축으로 이동
translate3d(tx, ty, tz)	지정한 크기만큼 x축, y축, z축으로 이동
translateX(tx)	지정한 크기만큼 x축으로 이동
translateY(ty)	지정한 크기만큼 y축으로 이동
translateZ(tz)	지정한 크기만큼 z축으로 이동
scale(sx, sy)	지정한 크기만큼 x축과 y축으로 확대/축소
scale3d(sx, sy, sz)	지정한 크기만큼 x축, y축, z축으로 확대/축소
scaleX(sx)	지정한 크기만큼 x축으로 확대/축소
scaleY(sy)	지정한 크기만큼 y축으로 확대/축소
scaleZ(sz)	지정한 크기만큼 z축으로 확대/축소
rotate(각도)	지정한 각도만큼 회전
rotate3d(rx, ry, rz, 각도)	지정한 각도만큼 회전
rotateX(각도)	지정한 각도만큼 x축으로 회전
rotateY(각도)	지정한 각도만큼 y축으로 회전
rotateZ(각도)	지정한 각도만큼 z축으로 회전
skew(ax, ay)	지정한 각도만큼 x축과 y축으로 왜곡
skewX(ax)	지정한 각도만큼 x축으로 왜곡
skewY(ay)	지정한 각도만큼 y축으로 왜곡
perspective(길이)	입체적으로 보일 수 있는 깊이 값을 지정

   ※ internet explore9 등의 이전 브라우저의 경우 -webkit-, -moz-, -ms-, -o- 등의 브라우저 접두사를 붙여야됨

 

 

 

변형과 관련된 속성

속    성	설    명
transform-origin	기준점을 설정해 변형을 적용할 때 사용하는 속성
perspective	3차원 변형에서 원근감을 표현하기 위해 사용하는 속성 속성 값은 픽셀 크기 값으로 지정하며 0보다 커야하며 값이 클수록 사용자로부터 멀어짐 none은 기본값으로 perspective를 지정하지 않음
perspective-orgin	perspective보다 좀 더 높은 곳에서 원근을 조절하는 듯한 느낌을 주는 속성
transform-style	3D 변형을 하위 요소에도 적용가능하도록 설정하는 속성 속성 값은 flat[하위 요소들을 평면으로 처리]과 preserve-3d[하위 요소들을 입체로 처리]가 있다.
backface-visibility	해당 요소의 뒷면을 보이도록 설정하는 속성 속성 값은 visible[뒷면 표시, 기본값]과 hidden[뒷면 표시 안함]이 있다.

  ① transform-origin 속성

{ transform-origin: x축값 y축값 z축값 ; }

ex> {transform-origin : left center ; }

속성 값	설    명
x축값	원점 기준의 x좌표값 길이 값이나 백분율, left, center, right 중에서 사용
y축값	원점 기준의 y좌표값 길이 값이나 백분율, top, center, bottom 중에서 사용
z축값	원점 기준의 z좌표값 길이 값만 사용 가능

  

  ② perspective-orgin 속성

{ perspective-orgin: x축값 y축값 ;}

ex>{ perspective-origin: 20% 20% ;}

속성 값	설   명
x축 값	웹 요소가 x축에서 어디에 위치하는지 지정[기본값은 50%] 길이 값, 백분율, left, right, center 중에서 사용
y축 값	웹 요소가 y축에서 어디에 위치하는지 지정[기본값은 50%] 길이 값이나 백분율, top, center, bottom 중에서 사용

 

 

 

Transition[트랜지션] 속성

시간에 따라 웹 요소의 스타일 속성이 바뀌는 것

속    성	설    명
transition-property	트랜지션 대상을 설정
transition-duration	트랜지션 진행 시간을 설정[기본값 : 0초] 속성 값은 시간이며 단위는 초나 밀리초를 사용 속성 값이 여러 개일 때는 쉼표로 구분
transition-timing-fuction	트랜지션 속도 곡선을 설정
transition-delay	트랜지션 지연 시간을 설정[기본값 : 0초] 속성 값은 시간이며 단위는 초나 밀리초를 사용
transition	transition-property, transition-duration, transition-timing-fuction, transition-delay 속성을 한꺼번에 설정

  ① transition-property

{ transition-property : 속성값 ; }

ex> {transition-property : all ; }

속성 값	설    명
all	요소의 모든 속성이 트랜지션 대상이 되도록 설정하는 속성 [기본값]
none	트랜지션 동안 아무 속성도 바뀌지 않도록 설정하는 속성
속성 이름	트랜지션 효과를 적용할 속성 이름을 지정하는 속성 속성이 여러 개인 경우, 쉼표로 구분해 나열함

  

  ② transition-time-function 속성

{ transition-time-function : 속성값 ;}

ex>{ transition-time-function : ease ; }

속성 값	설   명
ease	처음에 천천히 시작하여 점점 빨라지다 마지막에 다시 천천히 끝내도록 설정하는 속성[기본 값]
linear	시작부터 끝까지 똑같은 속도로 트랜지션을 진행하도록 설정하는 속성
ease-in	느리게 시작하도록 설정하는 속성
ease-out	느리게 끝내도록 설정하는 속성
ease-in-out	느리게 시작하고 느리게 끝나도록 설정하는 속성
cubic-bezier(n,n,n,n)	베지에 곡선을 표현하기 위해 사용하는 속성 n에 사용할 수 있는 값은 0~1

# 베지에 곡선

n개의 점을 이용해 (n-1)차 곡선을 만들어내는 함수

 

 

 

Animation[애니메이션] 속성

animation 속성 사용시, 자바스크립트나 플래시를 사용하지 않고 웹 요송에 애니메이션 추가 가능

• 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 만든다는 점에서 Transition하고 유사
• 중간 중간 원하는 곳에서 스타일을 추가로 변경가능하다는 점에 Transition과의 차이점
     ※ Keyframe[키프레임] : 애니메이션 중간에 스타일이 바뀌는 지점

속    성	설    명
@keyframes	애니메이션이 바뀌는 지점을 설정하는 속성 이름은 여러 개의 애니메이션을 구별하기 위해 애니메이션을 정의 선택자는 바뀌는 지점을 나타내기 위해 from, to 키워드나 0~100%비율을 사용
	@keyframes 이름 { 선택자 { 스타일 } }
animation-delay	애니메이션 지연 시간을 설정하는 속성
animation-direction	애니메이션 종류 후 처음부터 다시 시작할지, 역방향으로 진행할지를 지정
	animation-direction : 속성값
animation-duration	애니메이션 실행 시간을 설정 속성 값의 단위는 초(s)나 미리초(ms)를 사용
animation-fill-mode	애니메이션이 종료 혹은 지연되어 애니메이션이 실행되지 않을 때, 요소의 스타일을 설정하는 속성
animation-iteration-count	애니메이션 반복 횟수를 설정하는 속성
animation-name	@keyframes로 설정해 놓은 중간 상태의 이름을 설정하는 속성
	animation-name: 키프레임 이름 | none
animation-play-state	애니메이션을 멈추거나 다시 시작하도록 설정하는 속성
animation-timing-function	애니메이션의 속도 곡선을 설정하는 속성
	animation-timing-function: 속성값
animation	animation 관련 속성들을 한꺼번에 설정 가능하도록 하는 속성

① animation-direction

속성 값	설    명
normal	애니메이션을 끝까지 실행하면 원래 있던 위치로 돌아감[기본값]
alternate	애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행

 

② animation-iteration-count

속성 값	설    명
숫자	애니메이션을 입력한 숫자만큼 반복[기본값은 1]
infinite	애니메이션을 무한 반복

 

③ animation-timing-function

속성 값	설   명
ease	처음에 천천히 시작하여 점점 빨라지다 마지막에 다시 천천히 끝내도록 설정하는 속성[기본 값]
linear	시작부터 끝까지 똑같은 속도로 트랜지션을 진행하도록 설정하는 속성
ease-in	느리게 시작하도록 설정하는 속성
ease-out	느리게 끝내도록 설정하는 속성
ease-in-out	느리게 시작하고 느리게 끝나도록 설정하는 속성
cubic-bezier(n,n,n,n)	베지에 곡선을 표현하기 위해 사용하는 속성 n에 사용할 수 있는 값은 0~1

# 베지에 곡선

n개의 점을 이용해 (n-1)차 곡선을 만들어내는 함수