animation , transform

1. transform

이는 요소의 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성을 말한다.

transform은 translation, animation과 함께 사용하게 되면 다채로운 애니메이션 효과를 만들 수가 있다.

 

여기서 변형이 가능한 요소만 transform을 할 수 있다.

즉, CSS 박스 모델이 레[이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다.

 

transform의 속성은 다음과 같다

• scale (크기)
• skew(x-angle, y-angle)
• translate(x, y)
• rotate(angle)

변환 함수를 프로퍼티 값으로 쉼표 없이 나열을 하는데, 나열 순에 따라 차례대로 효과가 적용이 된다.

transform: scale(0.5) translateX(400px) rotate(360deg); 

이렇게 된 코드와

transform: scale(0.5) rotate(360deg) translateX(400px);} 이 코드는 완전 다르게 작동을 한다.

첫번째 코드의 경우는 translate로 x 축으로 400px 이동, 그리고 rotate으로 360도 회전을 한다.

하지만 두번째 코드의 경우는 360도를 회전하면 바뀐 x축을 기준으로 translate으로 인해 이동하게 된다.

즉 돌면서 바뀌는 x축을 기준으로 이동을 하는 것이다.

 

여기서 순서가 중요한 속성이 있고 아닌 것도 있다

중요한 속성 : rotate, translate

중요하지 않은 속성 : scale, skew

 

1-1. scale

X축, Y축 만큼 요소를 확대 혹은 축소가 가능하다.

• scale(x,y) - 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소 시킨다.
• scaleX(n) - 요소의 크기를 X축으로 x배 확대 또는 축소 시킨다.
• scaleY(n) - 요소의 크기를 Y축으로 y배 확대 또는 축소 시킨다.

 

1-2. skew

X축으로 x도 만큼 Y축으로 y도 만큼 요소를 기울인다. (deg)

• skew(x-angle,y-angle) - 요소를 X축으로 x 각도만큼, Y축으로 y 각도만큼 기울인다.
• skewX(x-angle) - 요소를 X축으로 x 각도만큼 기울인다.
• skewY(y-angle) - 요소를 Y축으로 y 각도만큼 기울인다.

1-3. translate(x, y)

X축으로 x만큼 Y축으로 y만큼 이동시킨다.(px, %, em 등)

• translate(x,y) - 요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.
• translateX(n) - 요소의 위치를 X축으로 x만큼 이동시킨다.
• translateY(n) - 요소의 위치를 Y축으로 y만큼 이동시킨다.

1-4. rotate(angle)

요소를 n만큼 회전 시킨다.(+/- deg)

해당 각도만큼 회전 (양수: 시계방향, 음수: 반시계 방향)

• rotate(angle)

2. animation

 

여기서 keyframe 별로 조절할 수가 있다.

@keyframes fire {

0% { transform: scale(0.5) skewX(-10deg); }

100% { transform: scale(0.5) skewX(10deg); }

 

.circle img {

 

skew, scale scale와 skew는 한묶음이며, 작성을 하게 되면 같이 작동을 하게 된다 **transform은 여러개 항목들이 세트로 해석된다

**transform: scale(0.5) skewX(-10deg);

 

transform-origin: center bottom; animation-name: fire;

cc

애니메이션 이름 지정

animation-name

 

duration 지속시간

animation-duration: 0.2s;

 

반복 -> 무한반복 infinite로 가능

animation-iteration-count: infinite;

 

방향 조절 가능

animation-direction: alternate;

 

이미지가 움직일 때 일정한 속도로 움직이게 하는 것 → linear는 등속도 움직임이다. 이징이 없다(속도에 대한 그래프)

animation-timing-function: linear; animation-timing-function: cubic-bezier(); }

 

.circle:hover img {

hover되었을 때 transform 내용이 통째로 변경

transform: scale(0.5) skewX(10deg); }