CSS 움직임 관련 속성

Transform

요소의 크기,위치,모양을 변경하는 속성

• ratate(45deg): 회전
• scale(2,3):width,height을 확대 혹은 축소
• skew(10deg,20deg): x축,y축을 기준으로 입력한 각도만큼 비틈
• translate(100px,200px): 위치 변경

prefix 접두사

다른 버전의 브라우저에서의 실행을 원할 경우 속성앞에 브라우저별 접두사를 붙인다

.transition {
	-webkit-transform:translate(100px,200px); //크롬,사파리
	-moz-transform:translate(100px,200px); // 파이어폭스
	-ms-transform:translate(100px,200px); // 익스플로러
	-o-transform:translate(100px,200px);  // 오페라
}

Transition

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공
transition은 자동으로 발동되지 않는다
:hover와 같은 가상 클래스 선택자 또는 JavaScript의 부수적인 액션에 의해 발동함

• transition-property: 효과를 적용할 css속성
• transition-duration: 효과가 나타나는데 걸리는 시간
• transition-timing-function: 효과의 속도
• transition-delay: 효과가 나오기전의 대기 시간

한줄로 쓰기

  .transition{
  	transition: width 2s linear 1s; 
  }
  .transition:hover{
  	width:300px;
  }

Animation

HTML요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화하는 효과
애니메이션을 나타내는 css스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임들로 이루어짐

• animation-name: @keyframes 애니메이션 이름을 지정
• animation-duration: 애니메이션 소요 시간
• animation-timing-function: 효과를 위한 타이밍 함수
• animation-delay: 애니메이션 효과가 나오기전의 대기 시간
• animation-iteration-count: 재생 횟수
• animation-direction: 애니메이션 진행 방향

.animation{
	animation-name:changeWidth;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-delay:1s;
	animation-iteration-count:6;
	animation-direction:alternate;
}
@keyframeschangeWidth{
	from{width: 300px;}
	to{width: 600px;}
}

Transform & Animation

.box1{
	animation:rotation 1500ms linear infinite alternate;
}
@keyframesrotation{
	from{ transform: rotate(-10deg);}
	to{ transform: rotate(10deg); }
} 

Prefix 작성시 주의 사항

@keyframes 와 transform 속성에 전부 작성해야 함

.box1{
	animation:rotation3slinear1s 6 alternate;
}
@-webkit-keyframesrotation{
	from{-webkit-transform: rotate(-10deg);}
	to{-webkit-transform: rotate(10deg);}
}