학습한 내용

애니메이션

transform

     : rotate(각도deg) - 괄호만큼 회전
       scale(x,y) - 지정한 비율만큼 확대, 축소
       skew(x,y) - 지정한 각도만큼 왜곡(3차원적 회전효과)
       translate(x,y) - x,y 축으로 이동
       
      

transition

      -property 
      -duration - 애니메이션이 진행되는 시간
      -timing function - 속도의 성격에 영향을 미침
      -delay - 실제로 시작하기 전 대기하는 시간
      ex) transition: width 2s linear 1s; (duration과 delay 순서 주의)
                    : width 2s linear, height 2s linear
                                       
                    

animation

     -name: 애니메이션 이름 지정
     -duration: 애니메이션이 동작하는 시간
     -timing-function: 진행 속도, 가속 방식을 지정
     -delay: 실제로 시작하기 전 대기하는 시간
     -interaction-count: 애니메이션 재생 횟수
     -direction: 애니메이션 진행 방향
     
     

@key frame 애니메이션 이름 { from{시작점} to{끝점} }

복잡한 애니메이션 효과 참조 사이트: https://jeremyckahn.github.io/stylie/

학습내용 중 어려웠던 점

코드가 많아져 중간중간에 오타가 나거나 빠뜨리는게 있었다.

해결방법

급하게 하지말고 느리더라도 꼼꼼히 확인.

학습소감

애니메이션 효과로 색상 변화와 모양변화 등 내가 원하는 방향으로 움직임을 구현할 수 있게되어 재미있었다.