움직이는 웹사이트 제작

1. Transform

1) rotate, scale

<style>
	.transition {
    	transform : rotate(45deg);
        transform : scale(2,3): 
    }
</style>

• rotate(angle) : 입력한 각도만큼 회전하며, 음수도 입력 가능하다.
• scale(x,y) : 숫자는 비율을 의미하며, width를 x배, height를 y배만큼 확대한다.

2) skew, translate

<style>
	.transition {
    	transform : skew(10deg, 20deg);
        transform : translate(100px,200px): 
    }
</style>

• skew(x,y) : x축 y축을 기준으로 입력한 각도만큼 비튼다.
• translate(x,y) : 선택한 오브젝트 좌표 변경

3) prefix 접두사

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

• transform은 CSS의 최신 버전에서만 실행 가능한 키워드.
  prefix를 추가하면 하위 버전의 브라우저에서도 실행이 가능하다.

---

2. Transition

1) property, duration

<style>
	.transition {
    	trnasition-property: width;
        transition-duration: 2s;
    }
</style>

• property : 효과를 적용하고자 하는 css 속성
• duration : 효과가 나타나는데 걸리는 시간

2) timing-function, delay

<style>
	.transition {
    	trnasition-timing-function: linear;
        transition-delay: 1s;
    }
</style>

• timing-function : 효과의 속도. linear는 일정하게 라는 의미
• delay : 특정 조건 하에서 효과 발동. 1s는 1초 후를 의미

3) 가상선택자 :hover

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

css에서 미리 만들어 놓은 클래스로, 마우스를 올렸을 때라는 조건.
:hover를 띄어쓰기 없이 붙여서 작성해야 한다.

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

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

---

3. Animation

.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; ]
}

• iteration-count : 애니메이션 반복 횟수
• direction : 애니메이션 진행 방향
  1. alternate : from -> to -> from
  2. normal : from -> to, from -> to
  3. reverse : to -> from, to -> from
• duration, timing-function, delay 는 transform 과 같음.

---

4. 애니메이션 응용

1) Transform & Animation

.box1 {
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

애니메이션 코드를 한줄로 작성 시, 먼저 나오는 숫자가 duration 이고 나중에 나오는 숫자가 delay.
순서를 변경해 작성하지 않도록 주의한다.

2) prefix 작성시 유의사항

.box1 {
    -webkit-animation: rotation 3s linear 1s 6 alternate;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(-10deg); }
    to {-webkit-transform: rotate(10deg); }
}

prefix가 같은 애니메이션끼리 연동된다.