[CSS]Transform, Transition, Animation

Transform

- 요소의 회전, 크기 조절, 기울이기, 위치 변경 등의 효과를 넣을 수 있다.

 

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

• rotate(a deg): 입력한 각도만큼 회전. 음수 입력 가능

• scale(a,b): width를 a배, height를 b배 확대

• skew(a deg,b deg): x축 y축을 입력한 각도 만큼 비틂.

• translate(a px, b px): 입력한 값 만큼 요소의 좌표 변경

 

 

Prefix 접두사

- transform은 css의 최신 기능이기 때문에 낮은 버젼의 브라우저에서의 실행을 원할 경우 prefix 접두사를 써준다.

 

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

 

 

Transition

- 요소의 변환 과정이 일정 시간에 걸쳐 서서히 나타나도록 하는 속성

 

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

• transition-property: 효과를 적용하고자하는 css 속성

• transition-duration: 트랜지션이 일어나는 지속 시간

• transition-timing-function: 트랜지션이 일어나는 속도

• transition-delay: 트랜지션이 일어나기 전까지 지체되는 시간

 

timing-function 속성 참고 사이트

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

https://easings.net/ko

 

 

Animation

 - 요소에 애니메이션 효과 적용

 

<style>
.animation{
	animation-name: changeWidth;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}

@keyframes changeWidth{
	from{ width:300px; }
    to{ width:600px; }
}
</style>

• animation-name: 애니메이션 명칭
• animation-duration: 애니메이션 지속 시간
• animation-timing-function: 애니메이션 속도
• animation-delay: 애니메이션이 일어나기까지 지체되는 시간
• animation-iteration-count: 반복 횟수 
• animation-direction: 진행방향

 - alternate: from>to>from

 - normal: form>to, from>to

 - reverse: to>from, to>from

 

 

Transition과 Animation의 차이

 

 

Transition	Animation
종료 후 상태 유지 불가능	종료 후 상태 유지 가능
hover, onclick등과 같은 트리거에 의해서 작동	정의하면 자동으로 작동
두 가지 상태밖에 지정할 수 없음	시작, 정지, 반복 등의 세세한 조작 가능