01 Transform

<style>
  .transtion {
  transform: rotate(45deg); /*회전, 음수가능*/
  transform: scale(2,3); /*(x=width, y=height), 소수는 축소, 숫자는 비율*/
  transform: skew(10deg, 20deg); /*x,y축 기준 입력한 각도만큼 비틂*/
  transfotm: translate(100px, 200px); /*선택한 오브젝트의 좌표 변경*/
}

prefix 접두사

-webkit-transform: translate(100px, 200px); 크롬, 사파리
-moz- : 파이어폭스
-ms- : 익스플로러 9.0
-o-: 오페라
transform이 css최신버전에서만 실행 가능한 키워드지만,
prefix를 추가하면 하위 버전의 브라우저에서도 실행이 가능

02 Transition

-변화하는 과정을 보여주기 위해 사용
-보다 자연스럽게 변화를 할 수 있게 해줌

transition-property

효과를 적용하고자 하는 css속성

transition-duration

효과를 적용하는데 걸리는 시간

transition-timing-function

효과의 속도
ex> 빨라지다->느려지게. 일정하게. 느리다->빨라지게

transition-delay

특정 조건 하에서
ex>마우스를 올렸을 때 1초후

가상 선택자:hover

'마우스를 올렸을때' css에서 미리 만들어 놓은 선택자.

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

"마우스를 올리면 1초 후에 width값이 300px로 2초동안 속도일정하게"
변하는 애니메이션 효과
반드시 duration 먼저 delay가 나중에
숫자가 하나인 경우 -> duration

03 Animataion

animation-name: 아무이름;

animation-duration

animation-timing-function

anumaion-delay

animation-iteration-count: 6;

반복횟수

animation-direction

진행방향
@keyframes 아무이름 { } 과 반드시 같이 써준다.

alternate: 시작 -> 끝 -> 시작
normal: 시작 -> 끝. 끝->시작
reverse: 끝 -> 시작. 시작->끝

.animation{
    animation: changeWidth 3s linear 1s 6 alternate;
} 
@keyframes changeWidth {
from { width: 300px;}
to { width: 600px;}
}

prefix 작성시 유의사항

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

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

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

04 Transform + Animation