1. Transitions
2. transform : rotate()
3. transform origin, translate(), skew()
4. scale(), 동시 적용.
5. Keyframes & Animations
6. Animation 속성
7. 3D 변환
1. Transitions
1. CSS3는 하나의 property 값을 일정시간동안 다른 값으로 변경하는 것이 가능하다.
- transition-property : 변환 적용할 property를 지정한다.
- transition-duration : 변환 시간을 설정한다.
- transition-timing-function : 지속 시간동안 어떻게 변환되는지 설정한다.
- transition-delay : 변환 효과의 지연시간을 설정한다.
ex) 5초동안 느리게 변환되는 애니매이션
|
|
변환 효과는 다양한 CSS 속성들(배경, 가로, 세로, 투명도 등)을 변화시킬 수 있다. 아래 코드는 마우스가 hover될 때 width 속성을 50px에서 250px까지 3초동안 변환한다.
|
|
2. transition-timing-function
transition-timing-function은 변환 효과가 어떻게 적용될지 설정한다.
- ease : 천천히 시작해서 빨라진다.
- ease-in : 천천히 시작해서 가속한 다음 갑자기 멈춘다.
- ease-out : 빠르게 시작해서 감속한 다음 정지한다.
- ease-in-out : ease와 비슷하지만 미세한 가속과 감속을 한다.
- linear : 일정한 속도를 유지하며 변화한다. 배경, 투명도 변겨엥 적합하다.
- cubic-bezier(p0,p1,p2,p3) : 이 함수를 통해 사용자 정의 timing을 0~1까지 지정할 수 있다.
|
ease : cubic-bezier(0.25, 0.1, 0.25, 1.0) |
|
linear : cubic-bezier(0.25, 0.25, 0.75, 0.75) |
|
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0) |
|
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0) |
|
ease-in-out : cubic-bezier(0.42, 1.0, 0.58, 1.0) |
2. transform : rotate()
1. CSS3 transform을 사용하면 요소를 이동, 번역, 회전, 스케일, 기울기 등이 가능하다. CSS3는 2D 및 3D 변환을 지원한다.
음수값도 입력 가능하다.
|
|
3. transform origin, translate(), skew()
1. transform-origin 속성으로 요소의 위치를 변경할 수 있다. 기본값은 속성의 가운데에 해당하는 50% 50%이다.
아래 코드는 같은 크기의 div를 가로로 25% 세로로 75% 이동하고 15도 기울인 모습이다.
|
|
2. translate() 함수는 현재 위치에서 x축, y축 매개변수만큼 이동시킨다. 양수는 오른쪽, 아래로 음수는 왼쪽 위로 이동시킨다. 기준점은 브라우저의 왼쪽 상단이다.
|
|
3. skew() 함수는 x축, y축 매개변수만큼 요소를 기울인다. y축 매개변수 생략하면 0으로 간주한다.
|
|
4. scale(), 동시 적용.
1. scale() 함수는 width, height 매개변수에 따라 요소의 크기를 변경한다. 1은 원래 크기고 2를 입력하면 2배가 된다.
매개변수를 하나만 입력하면 width, height에 동시에 적용된다.
|
|
2. 여러가지 변형을 한번에 사용할 수 있다. 간단하게 공백으로 변형들을 구분하면 된다. 콤마를 사용하면 어떤 효과도 적용되지 않으므로 반드시 공백을 사용해야 한다.
|
|
5. Keyframes & Animation
1. 애니메이션은 요소를 점진적으로 변화하게 한다. 어느 속성이는 원하는 만큼 변경할 수 있다. Keyframes는 요소가 특정 시점에 갖게 될 스타일을 정의한다. CSS 스타일을 @keyframes 규칙에 따라 작성할 경우 애니메이션은 점진적으로 현재 스타일에서 특정 시점의 스타일까지 변화한다.
아래 코드는 배경이 3번 변화한다. 애니메이션이 50% 완료되었을 때, 70% 완료되었을 때, 100% 완료되었을 때 각각 다른 배경을 갖는다.
|
|
% 사용에 대한 대안으로 from과 to 키워드를 사용할 수 있다. from은 0%를 의미하고 to는 100%를 의미한다.
아래 두 코드는 같은 의미이다.
|
|
|
|
2. 애니메이션이 동작하기 위해 요소에 애니메이션을 바인딩 해야 한다.
- animation-name 속성에는 요소에 적용될 애니메이션의 이름을 기술한다.
- animation-duration 속성에는 애니메이션이 진행될 시간을 기술한다. 만약 이 값이 없으면 애니메이션은 발생하지 않는다. 지속시간이 0이기 때문이다.
|
|
6. Animation 속성
1. animation-name 속성은 어떤 애니메이션을 사용할 것인지를 기술한다. keyframe에 매치되는 이름을 찾는다.
|
|
2. animation-timing-function 애니메이션 효과가 어떻게 설정될지 기술한다. transition-timing-function과 같다. animation은 효과가 끝난 후 다시 원래 상대로 돌아오지만 transition은 변환된 상태로 머무른다.
- ease : 천천히 시작해서 빨라진다.
- ease-in : 천천히 시작해서 가속한 다음 갑자기 멈춘다.
- ease-out : 빠르게 시작해서 감속한 다음 정지한다.
- ease-in-out : ease와 비슷하지만 미세한 가속과 감속을 한다.
- linear : 일정한 속도를 유지하며 변화한다. 배경, 투명도 변겨엥 적합하다.
- cubic-bezier(p0,p1,p2,p3) : 이 함수를 통해 사용자 정의 timing을 0~1까지 지정할 수 있다.
3. 그 외 속성들
- animation-delay 속성은 애니메이션 지연 시간을 설정한다. ( animation-delay : 5s; )
- animation-iteration-count 속성은 몇번 반복될 것인지 설정한다. infinite를 값으로 주면 영원히 반복된다. 만약 음수값이나 0을 주면 애니메이션은 시작되지 않는다.
(animation-iteration-count : 5; )
- animation-direction 속성은 keyframe이 적용되는 방향에 대해 설정한다.
normal : 기본값으로 0%~100%로 진행된다.
reverse : 100%~0%로 진행된다.
alternate : 앞으로 진행되다가 다시 뒤로 또 다시 앞으로 진행된다.
alternate reverse : 뒤로 진행되다가 다시 앞으로 또 다시 뒤로 진행된다.
4. animation 속성을 한줄로 기술할 수 있다. 아래 코드는 같은 값이다. 순서가 중요하며 변경될 시 애니메이션이 동작히지 않는다.
|
|
|
|
7. 3D 변환
1. 회전
X축과 Y축 뿐만 아니라 3D 변형은 Z축 변환도 포함한다. 2D 변형과 매우 비슷하다. rotateX(), rotateY(), rotateZ() 함수로 3D 공간에 있는 요소를 회전할 수 있다.
|
|
2. 이동
수평 이동을 담당하는 translateX(), 수직 이동을 담당하는 translateY(), 스크린 안쪽 바깥쪽 Z축 이동을 담당하는 translateZ() 함수를 사용하여 요소를 이동할 수 있다. 매개변수 단위로는 px, em, % 등이 사용된다. 양수를 사용하면 요소가 앞으로 나오고 음수를 사용하면 멀어진다. translate3d(x,y,z) 함수를 사용하면 한줄로 작성할 수 있다. 3d 이동은 relative position과 비슷하지만 웹 페이지 흐름에는 영향을 주지 않는다. 이동된 요소는 원래 위치에서 이동된 것처럼 보일 뿐이다.
|
|
3. 원근법(Perspective)
원근법은 얼마나 깊이 3d를 그려낼 것인가를 정의한다. 큰 값일수록 거리가 멀어지므로 시각 효과가 덜 강하다. 요소에 원근 속성을 적용할 때 실제 적용되는 것은 자식 요소이다. perspective 속성은 3D변환 요소에만 적용된다.
|
|
<연관게시글>
