[패스트캠퍼스 수강후기] 프론트엔드 강의 14회차 미션

내일 일정이 있어서 오늘은 1세트만 듣기로 했다

 

 

18. CSS / 속성 - 애니메이션 & 다단

 

 *

Animation : 요소에 애니메이션을 설정/제어 (단축)

Animation-name : @keyframes의 규칙의 이름을 지정, 기본값 none

 (2개 이상의 애니메이션 중간상태를 지정

 @keyframes 애니메이션이름(move-box) {

   0% { 속성(left); 값(100px); }

   50% { 속성; 값; }

   100% { 속성; 값; }

 }

 Transition보다 좀 더 상세 )

Animation-duration : 애니메이션의 지속시간 설정, 기본값 0s

Animation-timing-function : 타이밍 함수 지정, 기본값 ease

 (Ease : 빠르게-느리게

  Linear : 일정하게

  Ease-on : 느리게-빠르게

Ease-out : 빠르게-느리게

  Ease-in-out : 느리게-빠르기-느리게

  Cubic-bezier(n,n,n,n) : 자신만의 값을 정의 (0~1)

  Steps(n) : n번 분할된 애니메이션 )

Animation-delay : 애니메이션의 대기시간 설정, 기본값 0s

 (음수가 허용됨, 음수가 있을 경우 애니메이션은 바로 시작되지만

  그 값만큼 앞서 시작함(애니메이션 주기 도중에 시작) )

Animation-iteration-count : 애니메이션의 반복 횟수 설정, 기본값 1

 (infinite : 무한반복)

Animation-direction : 애니메이션의 반복 방향 설정, 기본값 normal

 ( normal : 정방향만 반복,

Reverse : 역방향만 반복

Alternate : 정방향에서 역방향으로 반복

Alternate-reverse : 역방향에서 정방향으로 반복

Animation-fill-mode : 애니메이션의 전후 상태 설정, 기본값 none

 (None : 기존 위치에서 시작, 기존위치에서 끝

 Forwards : 기존 위치에서 시작, 애니메이션 끝 위치에서 끝

 Backwards : 애니메이션 시작 위치에서 시작, 기존위치에서 끝

 Both : 애니메이션 시작 위치에서 시작, 애니메이션 끝 위치에서 끝)

Animation-play-state : 애니메이션의 재생과 정지 설정, 기본값 running

 (running 애니메이션을 동작

 Paused 애니메이션 동작을 정지)

 

*

Multi-columns 일반 블록 레이아웃을 확장하여 여러 텍스트 다단으로 쉽게 정리하며 가독성 확보

 Columns : 다단을 정의

Auto : 브라우저가 결정, 기본값 auto

Column-width : 단의 최적 너비를 설정, 기본값 auto

Column-count : 단의 개수를 설정, 기본값 auto

(예) column: 너비 개수;

Column-gap : 단과 단 사이의 간격 설정

Column-rule : 단과 단 사이의 구분선을 지정

 width : 선의 두께, style : 선의 종류, color : 색상

 (예) column-rule: 두께 종류 색상;

 

 

 

https://bit.ly/3g7RJpi

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스