1. tranform

• 요소 박스의 크기 변형 및 회전, 기울임 등을 지정

• 2차원, 3차원 변형이 가능하다.

• rotate()
  회전
  rotateX() rotateY()

• translate()
  이동
  translateX() translateY()
  

• scale()
  크기
  scaleX() scaleY()
  

• skew()
  비틀기
  skewX() skewY()
  

• perspective()
  부모 요소의 시점
  

• transform-origin
  중심축 설정
  

• backface-visibility
  뒤집어진 요소에 대한 설정

2. animation

• 초기 상태와 끝지점이 있으면서 중간 지점도 만들 수 있다.

• keyframe 단위로 이루어져있다.

• keyframe 선언 규칙

	@keyframe 식별자 {
    	0%{}
        
       100%{}
   }

• animation-name
  필수 속성
  애니메이션 이름 지정

• animation-duration
  필수 속성
  지속 시간

• animation-fill-mode
  실행 이전이나 이후에 표시될 요소
  forwards 처음 요소
  backwards 마지막 요소
  both 둘다 유지

• animation-direction
  진행 방향
  normal 순방향
  reverse 역방향
  alternate 번갈아가며 순방향
  alternate-reverse 번갈아가며 역방향
  

• animation-iteration-count
  반복 횟수
  infinite 무한
  

• animation-timing-function
  애니메이션 진행 속도의 변화 형태 지정
  linear 일정한 속도 유지
  ease default, 속도가 빨라지다가 중간지점을 기준으로 느려진다.
  ease-in 느리게 시작해서 속도가 빨라진다.
  ease-out 빠르게 시작해서 속도가 느려진다.
  ease-in-out 속도가 점점 빨라지다가 느려진다.
  cubic-bezier 사용자 설정
  

• animation-delay
  지연 시간 지정

• animation-plat-state
  진행 및 정지 상태 지정
  runing
paused 정지
  

🏷️ 속기법

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

3.transition

• 요소 박스에 지정된 속성이 점진적으로 전이 되는 과정을 구현한다.

• 애니메이션보다는 덜 디테일 하다.

• transition-property
  필수 속성
  전이 시키고 싶은 속성 지정
  all
  

• transition-duration
  필수 속성
  지속 시간
  

• transition-delay
  지연 시간

• transition-timing-function
  속도
  

4. 회고

오늘은 처음으로 질문에 걸렸는데 알고 있는 내용이지만 머리속으로 정리가 되지 못해 대답하지 못하였다. 질문 받자마자 멘붕이 걸려서 어버버어버버... 😭 대답하는거 너무 어렵다. 다음에는 대답을 꼭 잘했으면 좋겠다. 머리 속으로는 알고있으면서 왜 대답을 못하니ㅠㅠㅠㅠㅠ

animation, transform, trasition 다 너무 재미있고 하면서 너무 신기했다. 지금까지 javascript만 가능하다고 생각했던 것들이 css 하나로 되니까 너무 재밌었지만 어려웠다. 일단 x축, y축, z축, 각도, 방향 생각하면서 만들어야하니까 머리가 터질것같았다. 스키즈의 부작용 노래가 계속 떠올랐다. 머리!아프다!

결국 오늘도 과제가 나왔는데 배운 내용이 머리에 들어오지않아 시작도 못했다. 복습만 하느라 시간이 다 지나갔는데 내일은 꼭 시작해서 완성시켜야겠다. 이것만 마스터하면 css는 어느정도 할 줄 알 것같은데 가장 큰 산을 만난 기분이다ㅠㅠㅠㅠㅠ 왜 이렇게 어렵니.. 그리고 강의에서 보여준 코드 대로 했는데 오타도 안보이는데 대체 왜 안먹히는게 많을까...