[temp] 10. CSS

temp.WUI·2021년 8월 1일
animationtransformtransition
0

temp

목록 보기
10/12
post-thumbnail

16 CSS 속성 - 전환

TRANSITION(단축)

시작과 끝을 지정해서 중간의 값을 애니메이션화

바뀌기 전인 시작 지점에 속성을 넣어준다.

속성을 구분할 때 마다 , 키를 써준다.

  • 단축 속성으로 사용할 경우 앞에 쓰여진 초가 duration , 뒤 쪽에 쓰여진 초가 delay 를 뜻한다.
    • font 와 다르게 transition 은 / 로 구분하지 않고 순서로 나눈다.

Transition - 화면 이동을 위한 점진적 효과

(개별)

  1. property 효과를 줄 속성 이름을 선택
transition-property: all;

기본 값은 모든 속성에 적용이 된다.

  1. duration 몇 초 동안 지속될 것인지
transition-duration: 0;
  • 1s = 1000ms
  • 0.4s를 .4s로 작성할 수 있다.
  1. timing-function 타이밍 함수 지정

  • 타이밍 함수 (easing-function)

  • ease 빠르게-느리게

  • linear 일정하게

  • ease-in 느리게-빠르게

  • ease-out 빠르게-느리게

  • ease-in-out 느리게-빠르게-느리게

  • steps (n) n번 분할된 애니메이션

  • cubic-bezier(n,n,n,n) : 0~1의 값을 입력

    컴퓨터가 입력하기 좋은 방식의 값

  1. delay 전환 효과의 대기 시간 설정

:hover :로 딜레이 1s를 주었다면 마우스를 올리고 1s뒤에 전환 효과가 시작되고 마우스를 떼고 1s뒤에 다시 전환 효과가 시작되어 원래의 형태로 돌아온다.

전환 효과의 대기 시간이다 보니 돌아오는 부분에서도 딜레이가 걸린다.

TRANSFORM

요소의 변환 효과를 지정 / 공백을 구분자로 사용함

변환 함수를 이용해서 값을 준다.

2D와 3D 기능이 나누어져 있다.

다른 요소에 영향을 주지 않고 시각적인 효과를 줄 수 있다.

  • 예를 들어 width는 크기가 변하면서 주변 요소에 영향을 끼치지만 scaleX는 영향을 끼치지 X

구분자

대체로 정리해보자면 함수 내에서는 ,를 구분자로

속성 값으로는 공백을 구분자로 사용하는 것 같음.

변환 함수 2D

  • translate(x,y) 이동 / , 구분자

    원래 요소의 기본 정보는 남아 있다. (position의 relative를 생각하자)

    • translateX(x)
    • translateY(y)

position과 tranlate의 차이

position은 배치, translate는 이동의 개념이다.

position은 transition에 최적화 되어 있지 않다.

  • scale(x,y) 배수 - 단위 없이 기본값은 1이다.

    부모 요소에 적용하게 되면 하위 요소까지 영역을 가지는 모든 요소를 확대 축소 하기 때문에 전체 페이지의 확대나 축소에 영향을 줄 수 있다.

    • scaleX(x)
    • scaleY(y)

  • rotate(degree) 회전 - 단위는 deg

  • skew(x-deg,y-deg) 기울임

    Playit

    skewX(x-deg) - y축이 회전

    skewY(y-deg) - x축이 회전

    • 이해가 안된다.

      X, Y 축을 기준으로 기울이게 되는데 X축은 좌/우로, Y축은 상/하로 기울이는 효과를 준다.

      X 축에 +(플러스) 각도는 우측으로 , -(마이너스) 각도는 좌측으로 기울이는 효과이며,

      Y 축에 +(플러스) 각도는 아래쪽으로, -(마이너스) 각도는 윗쪽으로 기울이는 효과를 준다.

      출처: https://webclub.tistory.com/619

  • matrix(n,n,n,n,n,n) 직접적으로 변환 효과를 지정

transition과 hover와 width

마우스를 올리고 있던 중간에 전환 효과가 일어나면서 요소 크기의 변화로 요소의 밖으로 마우스가 옮겨가게 된다면 움직임에 문제가 생기고 부자연스럽게 버벅이게 된다.

특이하게도 trasition와 hover만 있다면 그런 문제가 발생하지 않지만 width값이 섞인다면 버벅임이 발생하게 된다.

width,height 값은 주변 형제 요소에 영향을 줄 수 있다는 것을 잊지 말자.

그래서 이런경우 scale 함수를 쓰면 되는데 scale 함수는 단위가 아닌 배율을 사용하기 때문에 정확한 사이즈로 전환하고 싶다면 계산이 필요할 것이다.

변환 함수 3D

z축

  • translate3d(x,y,z) 이동

    • translateZ(z)

  • scale3d(x,y,z) 크기

    • scaleZ(z)

  • rotate3d(x,y,z,a) 회전 -각도

    • rotateX(x)
    • rotateY(y)
    • rotateZ(z)

  • perspective(n) 원근법 거리 - transform 함수 중 제일 앞에 위치해야한다.

    수치가 높을 수록 멀리서 본다. (원근감이 강하지 않음)

    수치가 낮을 수록 가까이서 본다. (원근감이 강하다.)

  • matrix3d(n*16개) 3차원 변환 효과

변환 속성

  1. transform-origin 요소 변환의 기준점을 설정 (2D,3D)

    transform-origin: (기본값: x-50%, y-50%) == 정중앙

    값

    • x축 - left, center, right, length, %
    • y축 - top, center, bottom, length, %
    • z축(3D) - length, view

  2. transform-style 3D 변환된 요소의 자식 요소도 3D변환을 사용할지 설정 (3D 변환의 되물림) 

    transform-style: flat;

    값

    • flat 자식 요소에게 3D 요소 상속 시키지 않음 (자식은 3D 변환 효과 적용 X)

      지속적으로 명시해 줘야 한다.

      주어지지 않을 경우 부모의 변환효과와 함께 움직인다ㅣ

    • preserve-3d 자식 요소에게도 3D 변환 있음(후손은 아님, 오직 자손만)

      3d 효과가 적용된 상태로 상속이 계속되다 보니 x축과 y축이 첫 기준점과 다를 수 있다.

  3. perspective 하위 요소를 관찰하는 원근 거리 설정

    자손까지 상속이 되지만 후손에는 상속이 되지 않기 때문에 transform-style 속성을 주어야한다.

    perspective : length
    • perspective 속성 - 관찰 대상의 부모에 적용 - 기준점이 perspective-origin
    • transform: perspective(n) 함수 - 관찰 대상에 적용 - 기준점이 transform-origin

  4. perspective-origin 원근 거리의 기준점 설정

    perspectiv-orgin: 50% 50% (x축 y축)

    시선의 시작점의 위치를 지정해준다고 생각해 보자.

    값

    • x축 - left, right, center, %, 단위
    • y축 - top, bottom, center, %, 단위

  5. backface-visibility 회전 된 요소의 뒷면을 숨김

    backface-visibility: visible;

    rotate (3D) 값을 이용해서 180deg를 돌리게 되었을때 요소의 뒷면을 보일지 안 보일지

    값

    • hidden 뒷면을 숨김

원근감 속성

  • perspective : 원근, 소실점, 투시도법
  • perspective-origin : 원근법에 대한 기준점을 설정
  • transform-style: preserve-3d : 요소의 자식이 3D 공간에 배치

일반적으로 관찰자 시점이 적용될 요소는 해당 요소가 아닌 변형되는 요소를 포함하고 있는 부모 요소에 원근감을 설정해야만 한다는 것입니다.

즉, 변형시킬 요소의 부모에 적용하는 것이며 해당 부모의 모든 자식들이 동일한 관점으로 동일한 3D 공간에서 동작하게 되는 것입니다.

부모 요소에 투영점이 반영된 형제 요소의 변형(transform)이 개별 요소가 아니라 원근감을 서로 간에 영향을 미치면서 반영되는 것을 확인할 수 있습니다.

MATRIX

일반 변환 함수를 사용하게 되면 일반 함수는 matrix 함수로 변환되어 적용된다.

그러다 보니 matrix를 사용하게 되면 조금 더 빠른 효과를 볼 수 있다.

17 CSS 속성 - 애니메이션

ANIMATION(단축)

@keyframes 규칙을 설정/제어 한다.

animation: 애니메이션 이름 지속시간 [타이밍 함수 대기시간 반복횟수 반복방향 전후상태 재생/정지]

transition과 달리 시작(0%)과 끝(100%)이 아닌 여러 단계를 지정할 수 있다

→ 조금 더 다양한 움직임을 줄 수 있다.

단축속성에서 delay는 duration 뒤 쪽에 위치해야한다.

@keyframe

2개 이상의 애메이션 중간 상태 %를 사용하여 지정

@keyframes name {
	0% {
}
	100% {
}
}

(개별)

  • name keyframes에 설정된애니메이션의 이름을 가지고 지정

    animation-name: @keyframes의 이름

  • duration 애니메이션의 지속시간

    animation-duration: 1s

    1s =1000ms

  • timing-function 타이밍 함수

    animation-timing-function: ease

    transition의 timing-function과 동일하게 사용가능

  • delay 대기시간을 설정

    animation-delay: 0s

    -n 음수의 값도 지정할 수 있는데 그렇게 되면 기본 초 수에서 n값을 건너뛰고 애니메이션이 시작된다.

  • iteration-count 반복 횟수

    animation-iteration-count: 2
    값

    • 반복 횟수 1(단위는 따로 없음)

      direction 에서 alternate 를 사용하기 위해서는 적어도 2 이상의 수가 필요하다. 돌아오는 방향도 1번의 횟수를 사용하기 때문이다.

    • infinite

  • direction 애니메이션의 반복 방향을 설정

    animation-direction: normal; (정방향만 반복)
    값
    • reverse (역방향만 반복)
    • alternate (정방향으로 시작 돌아올 때는 역방향)
    • alternate-reverse (역방향으로 시작 돌아올 때는 정방향)

  • fill-mode 애니메이션의 전후 상태를 설정

    애니메이션 시작 위치가 구조 상의 위치와 서로 다를 때 사용하면 좋다.

    애니메이션의 시작 위치는 다른 형제 요소에 영향을 주지 않는다. 기존 위치가 존재하고 시각적인 위치인 것이다.

    animation-fill-mode: none;
(기본값) 기존 위치에서 시작 → 애니메이션 시작 위치로 이동 → 동작 → 기존 위치로 돌아옴
    값

    • forwards

      기존 위치에서 시작 → 애니메이션 시작 위치로 이동 → 동작 → 애니메이션 끝 위치에서 대기

    • backwards

      애니메이션 시작 위치에서 대기 → 동작 → 기존 위치로 돌아옴

    • both

      애니메이션 시작 위치에서 대기 → 동작 → 애니메이션 끝 위치로 돌아옴

    • :hover와의 문제

  • play-state 애니메이션의 재생과 정지를 설정

    animation-play-state: running 진행
    값
    • paused 정지
  • 가상요소 선택자에서 content는 중복되어서 사용이라기 보단 덮어씌워지는 건가..
profile
temp.WUI
🧩 temp repo
이전 포스트

[temp] 09. CSS

다음 포스트

[temp] 11. CSS

0개의 댓글