패스트캠퍼스 환급챌린지 2일차 미션 (2월 2일) : 초격차 패키지 : 21개 프로젝트로 완성하는 인터랙티브 웹 개발 with Three.js & Canvas 강의 후기

오늘은 챕터2의 css 애니메이션 부분과 cubic-bezier 강의를 들었다!

1. CSS 애니메이션

animation 하위속성은 아래와 같다. 

• animation-delay: 로드 이후 언제 시작할지
• animation-direction: (종료 후) 정방향 / 역방향 진행
• animation-duration: 얼마에 걸쳐 진행될지
• animation-iteration-count: 몇 번 반복될지 (infinite: 무한)
• animation-name: 중간 상태를 지정 (*그냥 애니메이션 이름지정. @keyframes 'animation-name' 이런식으로 사용)
• animation-play-state: 멈춤/재생 상태 지정
• animation-timing-function: 어떤 시간간격으로 진행할지
• animation-fill-mode: 시작 전/애니메이션 종료 후 스타일
  • none: 애니메이션 실행 안될 때와 같은 상태로 돌아옴
  • forwards: 애니메이션 마지막 상태값에서 멈춤
  • backwards: 애니메이션의 스타일을 애니메이션 시작 전에 미리 적용 (끝나면 돌아옴)
  • both: forwards & backwards 둘 다 적용

대부분은 한 번씩이라도 사용해봤는데, animation-direction에 'alternate'는 사용해보지 않아 생소했던 것 같다.

alternate 또는 alternate-reverse로 지정하면 한쪽 방향이 아닌 양방향으로 요소가 움직이게 된다.

그리고 매번 헷갈리는 ㅋㅋㅋ animation-fill-mode..! 사용할 때마다 검색해보고 썼던 것 같다.

 

keyframes로 애니메이션의 중간 동작들을 보다 세밀하게 제어할 수도 있다.

@keyframes 'appearFromBottom {
	from {
    	transform: translateY(1000px);
    }
    50% {
    	transform: translateY(300px);
    }
    to {
    	transform: translateY(0);
    }
}

 

2. SVG에 애니메이션 적용해보기

transform-box: transform 속성을 추가할 레이아웃의 css 속성을 정의할 수있음

/* Keyword values */
transform-box: content-box;
transform-box: border-box;
transform-box: fill-box;
transform-box: stroke-box;
transform-box: view-box;

- transform-box: fill-box(svg context에서는 context-box와 같다고함)를 추가해야 svg요소가 있는 위치(실제 범위)를 기준으로 애니메이션을 적용 가능

transform-origin: 변형의 중심을 의미

- transform-origin: center; 를 추가해야 별이 공전하지 않고 제자리에서 회전하게 된다.

이미지 출처 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

오늘의 학습인증 샷 ✨

학습 결과물

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://fastcampus.co.kr/event_online_challenge_2401_mission

커리어 성장을 위한 최고의 실무교육 아카데미 | 패스트캠퍼스

https://bit.ly/48sS29N