CSS와 애니메이션
Last updated
Last updated
2차원 변형(2D transform)은 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고 회전하는 것. 3차원 변형(3D transform)은 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것을 말한다.
최신 브라우저에서는 모두 지원되지만 인터넷 익스플로러 9를 비롯한 이전 브라우저는 브라우저 접두사(-webkit
-, -moz-
, -ms-
, -o-
)를 붙여야한다.
변형함수 | 설명 |
---|---|
최신 브라우저에서는 모두 지원되지만 인터넷 익스플로러 9를 비롯한 이전 브라우저는 브라우저 접두사(-webkit
-, -moz-
, -ms-
, -o-
)를 붙여야한다.
transform-origin
: 변형 기준점 설정
축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다.
perspective
, perspective-origin
: 원근감 표현하기
3차원 변형에서 사용하는 속성, 원래 위치에서 사용자가 있는 방향이나 반대방향으로 잡아당기거나 밀어내 원근감을 갖게한다.
transform-style
: 3D 변형 적용하기
부모 요소에 적용한 3D변형을 하위 요소에도 적용할 수 있다.
backface-visibility
: 요소의 뒷면 표시하기
요소의 뒷면, 즉 반대쪽 면을 표시할 것인지를 결정
트랜지션이란 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 바뀌는ㄴ 것처럼 스타일 속성이 바뀌는 것을 말한다.
transition-property
: 트랜지션을 적용할 속성 지정
transition-duration
: 트랜지션 진행 시간 지정
transition-timing-function
: 트랜지션 속도 곡선 지정하기
시작과 중간, 끝에서의 속도를 지정해 속도 곡선을 만들 수있다.
transition-delay
: 지연 시간 설정하기
트랜지션이 두개 이상 있을 때 하나의 트랜지션이 끝나고 다음 트랜지션이 언제부터 시작할 것인지를 설정.
trasition
: 트랜지션 속성 한꺼번에 표기하기
트랜지션 실행 시간이 대상별로 다르지 않고, 적용 대상이 전체이면 transition속성으로 한꺼번에 지정하는 것이 편리하다.
위의 순서대로 나열해야한다.
두 개 이상의 변형 동시에 사용하기
transform 속성에 여러 개의 속성을 나열하면된다.
CSS3의 animation
속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다.
CSS 애니메이션은 시작하고 끝나는 동안 원하는 곳 어디서든 스타일을 바꾸며 애니메이션을 정의할 수 있다는 점은 트랜지션과 다르다. 중간에 스타일이 바뀌는 지점을 keyframe(키프레임)이라 한다.
@keyframe
애니메이션 이름 지정
애니메이션 실행시간 설정
애니메이션 방향 지정
반복 횟수 지정
애니메이션 속도 곡선 지정
애니메이션 관련속성 한꺼번에 표시하기
나열된 속성 값 순서대로 값을 입력한다.
변형함수 | 설명 |
---|---|
속성 | 설명 |
---|---|
translate(tx, ty)
지정한 크기만큼 x축과 y축으로 이동
translateX(tx)
지정한 크기만큼 x축으로 이동
translateY(ty)
지정한 크기만큼 y축으로 이동
scale(sx,sy)
지정한 크기만큼 x축과 y축으로 확대/축소
scaleX(sx)
지정한 크기만큼 x축으로 확대/축소
scaleY(sy)
지정한 크기만큼 y축으로 확대/축소
rotate(각도)
지정한 각도만큼 회전
skew(ax,ay)
지정한 각도만큼 x축과 y축으로 왜곡
skewX(ax)
지정한 각도만큼 x축으로 왜곡
skewY(ay)
지정한 각도만큼 y축으로 왜곡
matrix3d(n,[,n])
4*4행렬을 이용해 이동과 확대/축소,회전 등의 변환 지정
translate(tx, ty, tz)
지정한 크기만큼 x축과 y축,z축으로 이동
translateZ(tz)
지정한 크기만큼 z축으로 이동
scale3d(sx, sy, sz)
지정한 크기만큼 x축과 y축, z축으로 확대/축소한다.
scaleZ(sz)
지정한 크기만큼 z축으로 확대/축소
rotate3d(rx,ry,rz,각도)
지정한 각도만큼 회전
rotateX(각도)
지정한 각도만큼 x축으로 회전
rotateY(각도)
지정한 각도만큼 y축으로 회전
rotateZ(각도)
지정한 각도만큼 z축으로 회전
perspective(길이)
입체적으로 보일 수 있는 깊이 값을 지정
@keyframes
애니메이션이 바뀌는 지점 설정
animation-delay
애니메이션 지연 시간 지정
animation-direction
애니메이션 종료 후 처음부터 시작할지, 역방향으로 진행할지를 지정
animation-duration
애니메이션 실행 시간 설정
animation-fill-mode
애니메이션이 종료되었거나 지연되어 실행되지 않는 상태일 때 요소의 스타일 지정
animation-iteration-count
애니메이션 반복 횟수 지정
animation-name
@keyframes로 설정해 놓은 중간 상태 이름 지정
animation-play-state
애니메이션을 멈추가너 다시 시작
animation-timing-function
애니메이션의 속도 곡선 지정
0
animation