🦁_21.11.09(2) TIL

Bori·2021년 11월 10일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

10/60

21년 11월 09일(2)

📝 CSS

📎 Animation

`@Keyframes`

특정 변화가 일어나는 지점을 설정하여 특정 시간 동안 해당 Property와 Value를 변화시킨다.
@Keyframes at-rule 은 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정하여, CSS 애니메이션 과정의 중간 동작을 보다 더 세밀하게 제어할 수 있게 한다.

transition vs animation 차이점

transition

트리거 요소가 필요하다.
=> :hover, :focus 등

시작 상태와 종료 상태 사이에서 동작
=> 간단한 애니메이션에 사용
=> button, dropdown menu 등

animation

시작 상태/종료 상태에 관계없이 동작 가능
=> 끝없이 동작 가능, 경계가 없음

animation 속성은 @Keyframes를 이용해 프레임 추가 가능

`@Keyframes` 규칙

@Keyframes 규칙은 애니메이션 코드를 지정한다.
스타일 변경 지점은 백분율로 지정할 수 있다.
=> from, to 키워드 사용 가능

  @keyframes animationname {
    keyframes-selector {
      css-styles;
    }
  }


`animationname`	애니메이션 이름 정의
`keyframes-selector`	애니메이션 지속 시간의 백분율 값 : 0%(from) -100%(to)
`css-styles`	CSS 스타일 속성 지정

@keyframes mymove {
  0%   {top: 0px; left: 0px; background: red;}
  25%  {top: 0px; left: 100px; background: blue;}
  50%  {top: 100px; left: 100px; background: yellow;}
  75%  {top: 100px; left: 0px; background: green;}
  100% {top: 0px; left: 0px; background: red;}
}

/* keyframes 안에서 !important는 무시된다. */
@keyframes myexample {
  from {top: 0px;}
  50%  {top: 100px !important;} /* ignored */
  to   {top: 200px;}
}

Animation 적용

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation은 단일 속성들의 축약형
- animation-name : 애니메이션을 호출하기 위한 이름
  => keyframes 이름과 동일
- animation-duration : 애니메이션의 시작부터 종료까지 총 지속 시간 지정
  => 단위 : s, ms
  => 양수 값만 가능
  => 0이나 음수로 지정했을 경우 애니메이션이 실행되지 않는다.
  => transition-duration과 비슷
- animation-timing-function : 애니메이션의 재생 속도 조절
  => ease | linear | ease-in | ease-out | cubic-bezier(n, n, n, n) 등
  => transition-timing-function과 비슷
- animation-delay : 애니메이션 시작을 지연시키고 싶을 경우 지정
  => 0 | now : 바로 재생
  => 음수 : 지정된 시간이 지난 이후의 프레임부터 애니메이션 시작
- animation-iteration-count : 애니메이션 재생 횟수 지정
  => 기본 값은 1
  => 0 | 음수 : 재생되지 않음
  => 실수 : 재생 도중 첫 번째 프레임으로 돌아가 종료
  => infinite : 무한 반복
- animation-direction : 애니메이션의 재생 방향 설정
  => normal : 순방향 재생
  => reverse : 역방향 재생
  => alternate : 순방향 시작, 역방향과 번갈아 재생
  => alternate-reverse : 역방향 시작, 순방향과 번갈아 재생
- animation-fill-mode : 애니메이션이 재생되지 않을 때 (시작 전, 종료 후 또는 둘 다) 요소에 대한 스타일 지정
  => none : 기본값, 스타일을 적용하지 않음
  => forwards : 마지막 키프레임의 스타일을 유지, 애니메이션 방향이나 반복 횟쉐 따라 달라짐
  => backwards : 첫 번째 키프레임의 스타일 값을 가져오고, animation-delay 동안 이 값을 유지
  => both : forwards와 backwards의 규칙을 따르며 애니메이션 속성을 양방향으로 확장
- animation-play-state : 애니메이션의 재생 여부 설정
  => running : 재생
  => paused : 일시정지

📎 `@Keyframes` 예제

빌딩 올리기

📎 Perspective

perspective : 3D-positioned element에 원근법을 제공하기 위해 z=0 평면과 사용자 사이의 거리를 결정

  /* Keyword value */
  perspective: none;

  /* <length> values */
  perspective: 20px;
  perspective: 3.5em;

  /* Global values */
  perspective: inherit;
  perspective: initial;
  perspecive: revert;
  perspective: unset;


`none`	`perspective transfrom` 이 적용되지 않음을 나타냄
`<length>`	z=0 평면과 사용자 사이의 거리를 나타내는 길이

CSS perspective MDN

CSS Perspective Explained with Example 3D Transform in CSS

Three.js

`perspective-origin`

perspective-origin : 뷰어가 보고 있는 위치를 결정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>perspective</title>
    <style>
        .원본 {
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 200px;
            border: 1px solid black;
            margin: 100px auto;
            perspective: 400px;
        }

        .회전패널 {
            width: 200px;
            height: 200px;
            background: aqua;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="원본">
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
        <div class="회전패널"></div>
    </div>
</body>
</html>

위 예제의 경우, 같은 각도로 움직였는데 왜 똑같은 박스로 나오지 않았을까?

소실점(vanishing point)이 다르기 때문
부모가 여러 자식을 가진 상태에서 자식에게 Y축 회전을 시켰을 때 바라보는 화면은 정면이 아니라 우측 중앙 기준이다.

카드 뒤집기 - 소스코드 보기

transform-style : 요소의 자식 요소를 3D 공간/평면 배치 여부 설정, 이 속성은 상속되지 않는다.

값 설명
flat 요소의 자식 요소를 요소 자체의 평면에 배치
preserve-3d 요소의 자식 요소를 3D 공간에 배치

값	설명
`flat`	요소의 자식 요소를 요소 자체의 평면에 배치
`preserve-3d`	요소의 자식 요소를 3D 공간에 배치

  /* Keyword values */
  transform-style: flat;
  transform-style: preserve-3d;

  /* Global values */
  transform-style: inherit;
  transform-style: initial;
  transform-style: revert;
  transform-style: unset;

backface-visibility : 요소의 뒷면을 사용자가 볼 수 있는지 여부 설정
요소의 뒷면은 앞면이 거울이 비친 것처럼 보인다. 2D에서는 보이지 않지만 transform으로 요소가 3D 공간에서 회전할 때 뒷면이 보일 수 있다.

값 설명
visible 사용자 쪽으로 돌렸을 때 뒷면이 보임
hidden 사용자에게 뒷면을 보이지 않게 함

값	설명
`visible`	사용자 쪽으로 돌렸을 때 뒷면이 보임
`hidden`	사용자에게 뒷면을 보이지 않게 함

   /* Keyword values */
  backface-visibility: visible;
  backface-visibility: hidden;

  /* Global values */
  backface-visibility: inherit;
  backface-visibility: initial;
  backface-visibility: revert;
  backface-visibility: unset;

참고 링크

Perspective Cube

CSS Perspective Playground

Card Flip

마무리

수면 시간 잘 지키기
=> 아침마다 매일 졸리다.
수업 들으면서 TIL 작성을 하니까 수업시간 내내 바쁘다.
=> 그래도 하루 안에 다 못적는 중 히히
=> 작성할 내용이 점점 많아지는 것 같다.
집에서만 수업 듣기 답답해서 점심시간에는 카페로 후다닥
=> 집에서는 쉬는 시간마다 누워버리는데 카페에서는 쉬는 시간에도 계속 타이핑 타다다닥!
오늘 배운 내용들은 알지만 잘 모르는 부분이었는데 TIL 작성하면서 MDN을 찾아보니 조금 더 알게 되었다.
=> MDN 보는거 싫어했는데 쪼금 적응했다?!

Bori

이전 포스트

🦁_21.11.09(1) TIL

다음 포스트

🦁_21.11.09(2) TIL

멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 11월 09일(2)

📝 CSS

📎 Animation

`@Keyframes`

`@Keyframes` 규칙

Animation 적용

📎 `@Keyframes` 예제

빌딩 올리기

📎 Perspective

`perspective-origin`

카드 뒤집기 - 소스코드 보기

마무리

🦁_21.11.09(1) TIL

🦁_21.11.10 TIL

0개의 댓글

🦁_21.11.09(2) TIL

멋쟁이사자처럼_프론트엔드 스쿨 1기

21년 11월 09일(2)

📝 CSS

📎 Animation

@Keyframes

@Keyframes 규칙

Animation 적용

📎 @Keyframes 예제

빌딩 올리기

📎 Perspective

perspective-origin

카드 뒤집기 - 소스코드 보기

마무리

🦁_21.11.09(1) TIL

🦁_21.11.10 TIL

0개의 댓글

`@Keyframes`

`@Keyframes` 규칙

📎 `@Keyframes` 예제

`perspective-origin`