학습한 내용

• css 애니메이션 관련 속성들과 간단한 실습

애니메이션 속성

• 웹사이트에 인터랙션한 효과를 구현하기 위하여 사용하는 속성이다.
  과거에는 자바스크립트로 표현해야 했지만, css의 발전으로 일부 간단한 애니메이션도 작업이 가능하다.

css애니메이션 관련 속성들

1. transform

• 선택한 오브젝트의 확대, 축소, 회전, 위치 변경 등을 하는데 사용한다.
  rotate : 회전(deg)
  scale : (x축,y축) 비율
  skew : rotate의 3차원적인 회전기능 (x축,y축) 회전
  translate : 선택한 영역의 오브젝트의 위치 변경 (x축,y축)
• 동작하기 위해서는 hover등 어떠한 이벤트가 발생하여야 한다.

2. transition

• 애니메이션 효과가 설정한 값에 따라(시간,반복등) 다양한 방법으로 진행 되도록 할때 사용한다.

3. animation

• 어떤한 조건 없이 변화하는 과정을 보여주고 싶을 때 사용한다.

  • 지속시간, 횟수, 반복 등을 지정하여 표현 할 수 있다.

• @keyframes 명령어와 함께 사용하여야 한다.

  • 실제로 표현하고자 하는 행동을 지정하고, from~to 혹은 %단위로 행동을 나눌 수 있따.

4. transform과 animation 사용시 주의사항

• 사용 가능한 버전이 존재한다. 호환을 위해서 프리픽스 작업이 필요한 경우가 있다.

어려웠던 내용

• 따로 실습 과정에서 여러 애니메이션을 겹치려고 하는데 개념들이 헷갈려서 해결 못하고 있다.

해결방법

• 여러시도를 해보는 중이다.

소감

• 정리가 더 필요하다 ㅜㅠ