HTML/CSS animation, transform

1. transform

• transform이란 어떤 object를 돌린다거나 크기나 위치를 조정할 때 사용
• rotate(00deg); : 입력한 각도만큼 회전(음수도 입력 가능)
• scale(0,0); : 숫자의 비율을 의미 앞자리는 width 뒷자리는 height 만큼 확대 축소는 소수점!
• skew(00deg,00deg); : x축, y축으로 입력한 만큼 각도를 비틂
• translate(00px, 00px); : 선택한 오브젝트의 좌표 변경
• prefix 접두사 : CSS3의 최신언어이기때문에 각각의 브라우저의 버젼에 맞춰 넣어줘야함

<style>
	.transition{
    -webkit-transform : translate(100px, 200px);	// chrome, safari
    -moz-transform : translate(100px, 200px);	// firefox
    -ms-transform : translate(100px, 200px);	// explore 9.0
    -0-transform : translate(100px, 200px);	// opera
    }
</style>

2. transition

• property: (width|background-color,...); : 효과를 적용하고자 하는 CSS 속성
• duration: 0s; : 효과가 나타나는데 걸리는 시간
• timing-function:linear; : 효과의 속도 linear은 일정하게라는 의미
• deplay : 0s; : 특정 조건하에서 효과 발동
• (가상선택자) hover : CSS에서 미리 만들어놓은 클래스
• 예시

<style>
	.class_name{
    	// 아래처럼 한 줄로 가능
    	.transition : width 2s linear 1s;	// 처음 나오는 s는 duration 
        .transition : hover{width : 300px;}	// 2번째 나오는 s는 delay
    }
</style>

#result
## 마우스를 올리면 1초 후에 width값이 300px로 2초동안 
## 속도 일정하게 변하는 애니메이션 효과

3. animation

• 조건에 상관없이 이벤트를 생성할 때 ex) 웹사이트를 접속하자마자
• animation-name : name; : class처럼 이름을 생성
• animation-duration : 0s; : 실행되는 시간
• animation-timing-funtion : linear; : 속도 곡선을 제어
• animation-deplay : 0s; : 시작전 deplay 시간
• animation-literation-count : 6; : 애니메이션 반복 횟수
• animation-direction : alternate; : from -> to -> from 시작->끝->시작
• animation-direction : normal; : from -> to,시작->끝
• animation-direction : reverse; : to -> from,끝->시작
• @kayframes : 애니메이션을 적용하기위해선 반드시 필요한 문자

@keyframes animation_name{
	from{ width : 300px; }
    to{width : 600px; }
}

4. transform & animation

• Ex)

<style>
.box1{
	// 1500ms == 1.5s
	-webkit-   animation : rotation 1500ms linear infinite alternate;
}
@-webkit-keyframes rotation{
	from{ -webkit- transform : roate(-10deg); }
    to{ -webkit- transform : roate(10deg); }
}
</style>