[포스코X코딩온] CSS Transform, Transition, Animation

이번 포스팅에서는 CSS의 전환 요소인 Tranform, Transition

애니메이션 효과를 주는 Animation 요소를 알아보도록 하겠습니다.

 

Transform

transform은 요소의 변환 효과를 주는 요소이다.

• transform: 변환함수1 변환함수2 변환함수3 ... ;
• transform: 원근법 이동 크기 회전 기울임;

 

 

Transform의 2D 변환 함수이다.

2D 변환 함수는 기본적으로 X축과 Y축의 값을 주어 변환 할 수 있다.

당연히 X축과 Y축을 각자 줄 수도, 하나의 값만 줄 수 도 있다.

 

 

 Transform의 3D 변환 함수는 X,Y축에 Z축을 추가로 사용한다.

 

• ratato를 사용할 때 회전을 deg로 준다. ex) rotatoX(30deg) 음수도 사용 가능
• skew는 각도를 설정할 때 사용한다. ex) skewX(30deg) 음수도 사용 가능

 

Backface-visibility는 3D 변환으로 회전된 요소의 뒷면 숨김 여부를 설정하는 요소이다.

backface-visibilty: visible; 이 기본 값으로 값을 hidden으로 설정 시 안보이게 설정할 수 있다.

하지만 자리는 그대로 차지한다.

 

실습 1

 

 

하나의 컨테이너를 설정(box), 그 안에 3개의 사진을 <img>태그를 사용해서 넣었다.

각 이미지에 z-index를 사용해서 겹치는 부분을 설정하기 위해서 position값을 주었다.

left, right로 적절한 위치를 잡고 transform: skewY(25deg) 요소를 주어 Y축으로 25도 기울였다.

사진의 크기가 너무 커서 scale요소로 크기를 줄였다.

• scale요소는 0~n 사이의 숫자를 준다. 숫자가 작아질 수록 이미지의 크기가 작아진다.
• 한 축의 scale만 따로 조정 가능하다.

 

출력 결과

 

 

 

 

Transition

Transition은 요소의 전환(시작과 끝)효과를 지정하는 단축 속성이다.

 

Transition의 지속시간은 단축형으로 작성할 때는 꼭 포함 시켜야하는 속성이다.

 

transition-property

• 기본값은 all로 모든 속성에 적용된다.
• 속성 이름을 지정하여 전환 효과를 사용할 속성 이름을 명시할 수 있다.

 

transition-duration

• 전환 효과의 지속시간을 지정하는 요소
• 기본값은 0s로 전환 효과가 없다.
• 지속시간(s)을 지정하여 사용할 수 있다.

 

transition-timing-function

 

transition-delay

• 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정한다.
• 기본값은 0s로 대기시간이 없다.
• 대기시간(s)을 지정하여 사용할 수 있다.

 

실습2

 

 

transition-property를 background-color로 설정 하여, 백그라운드 색이 변경되게 만들었다.

지속시간은 2s, 전환 효과 타미잉은 ease 그리고 딜레이는 1s로 설정.

hover를 설정하여 마우스를 가져다 대면 width, height이 바뀌고 백그라운드 컬러가 pink로 변경된다.

 

두 번째 상자는 안에 내용물을 넣고 transition-property을 all로 설정했고, 마우스를 가져다 대면 상자의 크기가 변하게 설정했다.

 

 

 

 

Animation

aimation은 @keyframes를 사용

• CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능.
• 애니메이션의 중간 지점마다 CSS 속성 값을 지정하여 세밀하게 애니메이션 조절하는 기능.
• 키프레임을 변수에 선언하고 해당 변수를 CSS에서 불러와서 사용할 수 있다.
• Keyframes로 설정되는 값은 to/from 혹은 0%~100%로 설정 가능하다.

 

Animation의 속성은 아래와 같다.

• animation-name(이름) : keyframes로 지정한 애니메이션 이름
• animation-duration(지속시간) : 애니메이션 지속 시간
• animation-delay(지연시간) : 애니메이션 지연 시간
• animation-iteration-count(반복횟수) : 반복되는 횟수를 지정, 소수점 가능, infinite(무한 반복)
• animation-timing-function(반복형태) : 애니메이션이 진행되는 형태(시간 함수), transition이랑 같다.
• animation-direction(애니메이션 방향) : 애니메이션의 방향을 지정

 

animation : name duration timing-function delay iteration-count direction; 형태로 단축해서 사용가능

 

실습3

 

 

border-radius를 50%로 주어 구 형태로 만든다.

구에 위치를 이동시키기 위해 position: absolute를 주었다.

animation-name을 설정하고 지속시간 3초, 반복 6회, 딜레이 0.5초, 반복 형태는 ease를 주었다.

 

애니메이션을 사용하기 위해서는 Style태그 밑에 @keyframes를 사용해야 한다.

이름은 animation-name에서 설정한 이름을 준다. 0%~100%의 값을 설정해준다.

 

 

 

 

실습4

글자가 오른쪽에서 왼쪽으로 이동하는 모습으로 보이게 하려 한다.

지속시간은 3s로 설정, 이번에는 0%~100%형태가 아닌 from/ to형태로 진행하였다.

margin-left:100%로 주어 글 값이 브라우저 오른쪽 끝에 존재하게해 화면에서 안보이게 만든다.

이후 to에서 margin-left값을 0%로 만들어 화면에 보이게 만든다.

 

두 줄로 나오는 것을 한줄로 나오게 만들고 싶으면 처음부터 글이 가지고 있는 witdh값을 300%로 맞춰서 한 줄로 나오게 만들 수 있다.

 

애니메이션 실습