transform

요소 이동

• translate()
  • translateX()
  • translateY()

#id1{transform : translate(50px, 100px);}
/* 요소를 x축으로 50px y축으로 100px만큼 이동 */

#id2{transform : translate(-50%, 50%);}
/* 요소를 x축으로 요소 너비의 50프로만큼 -방향으로 이동*/
/* 요소를 y축으로 요소 높이의 50프로만큼 +방향으로 이동 */

요소 회전

• rotate()
  • rotateX()
  • rotateY()
• rotate3d()

#id1{transform : rotate(20deg);}
/* 요소를 시계방향으로 20도 만큼 회전 */

요소 크기 변경

• scale()
  • scaleX() : 너비
  • scaleY() : 높이
• scale3d()

#id1{transform : scale(1.5);}
/* 요소의 크기를 1.5배만큼 변경 */

요소 기울이기

• skew()
  • skewX()
  • skewY()

#id1{transform : skew(20deg, 10deg);}
/* x축에 대하여 20도만큼 기울이기 */
/* y축에 대하여 10도만큼 기울이기 */

#id2{transform : skew(20deg);}
/* == transform:skew(20deg, 0); */

---

transition

• 전환

• 요소의 속성 값이 변할 때, 속도나 시간을 지정하여 자연스러운 효과를 줌

• 속성

  • transition-delay 속성
    • 전환 전, 딜레이
  • transition-duration 속성
    • 전환되는 시간
  • transition-property 속성
    • 어떠한 속성이 변할 때, 전환효과를 줄 지 지정
  • transition-timing-function 속성
    • 전환 속도 유형을 정함
    • ease : 천천히 → 빨리 (기본값)
    • linear : 등속
    • ease-in : 천천히 시작
    • ease-out : 천천히 끝
    • ease-in-ou : 천천히 → 천천히

---

animation

• 요소를 어떤 스타일 → 다른 스타일로 점차적으로 변환하는 애니메이션 속성

@keyframes Rule

• 애니메이션 속성에 의해 요소가 점차적으로 변하는 스타일을 지정
• 특정 시간에 요소가 가지는 스타일을 지정
• 시작
  • 0% {}
  • from {}
• 끝
  • 100% {}
  • to {}
• 중간
  • n% {}

animation 속성

• 애니메이션을 줄 요소에 지정하는 속성

animation-name

• @keyframse의 요소가 가지는 스타일을 가져옴

animation-duration

• 애니메이션 한 사이클의 시간을 지정

animation-timing-function

• 애니메이션의 전환 속도를 결정
  • ease : 천천히 → 빨리 (기본값)
  • linear : 등속
  • ease-in : 천천히 시작
  • ease-out : 천천히 끝
  • ease-in-ou : 천천히 → 천천히

animation-delay

• 애니메이션 시작 시간 지연

animation-iteration-count

• 반복 횟수 결정
  • infinite 값 줄 시, 계속 반복

animation-fill-mode

• 시작 전이나 종료 후 상태 결정

animation-direction

• alternate : 0% → 100% → 0% ... 번갈아
• reverse : 역방향
• normal
• alternate-reverse

div{
	width: 100px;
	height:100px;
	background:red;

	animation-name : example;
	animation-duration : 4s;
	animation-timing-function : linear;
	animation-iteration-count:infinite;
	animation-direction:alternate; 

	position: relative;
}

@keyframes example{
	0% {background-color:red; left: 0; top: 0;}
	50% {background-color:green; left: 200px; top: 0;}
	100% {background-color:blue; left: 200px; top: 200px;}
}