💫 변형(transition)

• CSS3에서 움직임을 구현할수 있는 기능
• 변형 속성과 애니메이션 속성으로 나뉜다.

📎 transition 속성

• 수치형 속성값(숫자, 색상)에 한해서 객체의 속성(상태)값이 변화되는 과정을 시간 순으로 보여주는 속성

• 속성 |

  • tansition : 모든 transition 속성을 한 번에 사용
  • tansition-property : 어떤 속성을 변형할지 지정
  • tansition-duration : 몇 초 동안 재생할지 지정
  • transition-timing-function : 수치 변형 함수를 지정
  • tansition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정

• 사용가능한 스타일 속성 |

  • 위치 속성 : top, left, bottom, right
  • 크기 속성 : width, height
  • 박스 속성 : margin, padding
  • 테두리 속성 : broder-width, border-radius, border-color
  • 색상 속성 : color, background-color
  • 투명도 속성 : opacity
  • 변환 속성 : transform
  • 폰트 속성

transition-timing-function 속성

• ease : 빠르게-느리게
• linear : 일정하게
• ease-in : 느리게-빠르게
• ease-out : 빠르게-느리게
• ease-in-out : 느리게-빠르게-느리게
• cubic-bezier(n,n,n,n) : 자신만의 값을 정의(0~1)
  
  

📎 animation 속성

• 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있다.

• 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임 (@keyframe)들로 구성되어있다.

• transition과 유사하지만, 훨씬 더 규모가 크고 복잡하며 다양한 기능을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다.

• 속성 |

  • animation : 모든 animation 속성을 한 번에 적용
  • animation-name : 애니메이션 이름을 지정
  • animation-duration : 애니메이션을 몇 초 동안 재생할지 지정
  • animation-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정
  • animation-direction : 애니메이션 진행 방향을 설정
    • alternate : from에서 to로 이동 후 to에서 form으로 이동을 반복
    • normal : 계속 from에서 to로 이동
  • animation-iteration-count : 애니메이션 반복 횟수를 지정
    • infinite : 무한번 반복
  • animation-timing-function : 수치 변형 함수를 지정
  • animation-fill-mode : 애니메이션이 끝난 후의 상태를 지정

    속성값	설명
    none	끝난 후 상태를 설정하지 않습니다.
    forwards	끝난 후 그 지점에 그대로 있습니다.
    backwards	끝난 후 시작점으로 돌아옵니다.
    both	애니메이션이의 앞 뒤 결과를 조합하여 설정합니다.
    inherit	애니메이션의 상태를 상위 요소한테 상속받습니다.

• @keyframes 규칙 |

  • CSS3에서 애니메이션을 지정하는 형식
  • 형태 : @keyframes 이름
  • 키 프레임 안에는 퍼센트(%) 단위로 애니메이션을 적용한다.
  • 0% 경우는 from 키워드, 100% 경우는 to 키워드를 사용할 수 있다.

  @keyframes key {
  	from {}
   	to {}
  }

  @keyframes key {
  	0% {}
    	50 % {}
   	100% {}
  }

탱탱볼

💫 변환(transform)

• HTML5 시대가 되면서 플래시와 같은 플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었다.
• HTML5에서 3차원을 구현하는 방법
  1. 자바스크립트를 사용한 WebGL
  2. CSS3을 사용한 3차원 변환

💫 2차원 변환

• 대부분의 컴퓨터 프로그램은 화면 좌표를 사용한다. 화면 좌표는 그림 10-2처럼 왼쪽 위에 위치하는 점이 영점이며 오른쪽과 아래로 갈수록 크기가 증가한다.

• 2차원 화면 좌표 : X축 Y축이 있는 화면 좌표
  

• 3차원 화면 좌표 : X축 Y축 Z축이 있는 화면 좌표
  

📎 transform 속성

• HML5는 CSS3을 사용해 그림 10-4의 2차원 변환을 할 수 있다.
• 변환이 가능하다 > HTML 페이지 스스로 애니메이션 같은 플래시 콘텐츠를 만들 수 있다.
• 요소의 위치, 회전, 배율(크기), 기울기(비틀기)
  

transform: 값(함수);

• 값(함수) |
  1. translate(x좌표, y좌표) : 특정 크기만큼 이동
  2. rotate(deg) : 특정 각도만큼 회전
  3. scale(가로축배율, 세로축배율) : 특정 크기만큼 확대 및 축소
  4. skew(x각도, y각도) : 특정 각도만큼 기울기(비틀기)
  5. matrix() : 1~4번 포함. 사용자 정의형 > 행렬

60도 회전, 크기 1.2배, Y축 방향으로 10도 기울어진 사각형

💭 변환 함수의 순서

• 함수를 입력하는 순서에 따라 실행 결과가 바뀔 수 있다. 앞쪽부터 차례대로 적용된다.

📎 transform-origin 속성

• 변환 중심축을 설정
• 기본으로 transform-origin 속성은 태그 영역의 중심을 변환 중심으로 잡는다.
• default : center center / 50% 50%