움직이는 웹사이트 만들기

종류

Transform
특정 요소에 효과를 적용
CSS 요소를 회전, 크기 조정, 기울이기 등 변화
test1:hover

Transition
특정 요소에 특정한 조건에 해당될 때
CSS 값이 변할 때(특정 조건 = 트리거) 특정한 효과를 적용
div:hover

Animation
특정한 조건 없이 효과를 적용
Transition 처럼 변경하지만, 보다 여러가지의 종류로 다양하게 변화 가능
+시작 정지 반복까지 제어 가능
test2:hover{} @keyframes{}

Transform

<style>
  .transtition {
  transform: rotate(45deg);				/ 회전 /
  transform: scale(2, 3); 				/ 확대, 축소 /
  transform: skew(10deg, 20deg)			/ 각도 변경 /
  transform: translate(100px, 200px) 	/ 위치 변경 /
  }
<style>

• . rotate(45deg);
  입력한 각도만큼 회전 (음수도 가능)
  
  
• . scaale(2, 3);
  숫자는 비율을 의미
  width를 2배, height를 3베 확대
  
  
• . skew(1odeg, 20deg);
  x축, y축을 기준으로 입력한 각도만큼 비틂
  
  
• . translate(100px, 200px);
  x축, y축을 기준으로 선택한 오브젝트의 좌표 변경
  
  

Prefix (접두사)

<style>
  -webkit-tranform: translate(1oopx, 200px);	/ 크롬, 사파리 /
  -moz-tranform: translate(1oopx, 200px);		/ 파이어폭스 /
  -ms-tranform: translate(1oopx, 200px);		/ 익스플로러 9.0 /
  -o-tranform: translate(1oopx, 200px);			/ 오페라 /

• 다른 버전(하위 버전)의 브라우저에서의 실행을 원할 경우
  

Transition

<style>
  .transition {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
  }
<style>

• . property
  효과를 적용하고자 하는 css 속성
  
• . duration
  효과가 나타나는데 걸리는 시간
  
• . timing-function
  효과의 속도
  ease : 느리게 시작 후 빨라졌다가 느려지면서 종료
  linear : 일정한 속도
  ease-in : 느리게 시작 후 일정 속도로 등속 운동
  ease-out : 일정 속도로 등속하다가 느려지면서 종료
  ease-in-out : 느리게 시작 후 느려지면서 종료
• . delay
  특정 조건 하에서 효과 발동
  1s는 '1초 후'
  

가상 선택자 ( :hover )

<style>
  .transition:hover {
  	width: 300px;
  }
</style>

• css에서 미리 만들어놓은 클래스
  '마우스를 올렸을 때' 라는 조건을 담음

정리

<style>
  .transition {
  transition: width 2s linear 1s;
  }
  .transition:hover {
  width: 300px;
  }
</style>

• 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동
• 숫자의 순서는 무조건 'duration - delay' 순
• 숫자가 하나라면 'duration'
  
  

Animation

<style>
  .animation {
  animation-name: changeWidth;		/ 임의로 작성 /
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: 6s;
  animation-direction: alternate;
}
@keyframes changeWidth {
  from { width: 300px; }
  to { width: 600px; }
    </style>

• . iteration-count
  애니메이션 반복 횟수
  
  
• . direction
  애니메이션 진행 방향
  1. arternate : from > to > from
  2. normal : from > to, from > to
  3. reverse : to > from > to > from

한 줄로 작성 ( 숫자는 'duration - delay' 순 )

<style>
	.animation: changeWidth 3s linear 1s 6 alternate;
</style>

Prefix

<style>
  .box {
  -webkit-animation: rotation 3s linear 1s 6 alternate;
  }
  @-webkit-keyframes rotation {
  	from {-webkit-transform: rotate(10deg); }
    to {-webkit-transform: rotate(10deg); }
</style>

• prefix가 같은 애니메이션끼리 연동