본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

Transform

rotate, scale

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

• rotate(45deg) 45도 회전, deg를 사용, 음수도 가능
• scale(2, 3) 비율(width, height), 축소는 0.5처럼 소수점 입력

skew, translate

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

• skew(10deg, 20deg) 각도변경(x축, y축), 음수도 가능
• translate(100px, 200px) 위치변경

prefix 접두사

• 다른버전의 브라우저에서 실행을 원할경우 사용

<style>
  .transition {
    -webkit-transform: translate(100px, 200px);
    -moz-transform: translate(100px, 200px);
    -ms-transform: translate(100px, 200px);
    -o-transform: translate(100px, 200px);
  }
</style>

• -webkit 크롬, 사파리
• -moz 파이어폭스
• -ms 익스플로러 9.0
• -o 오페라

Transition

• 자연스러운 변화를 원할 때 사용

property, duration

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

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

timing-function, delay

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

• transition-timing-function 효과의 속도(linear-일정하게)
• transition-delay 시작하기까지의 시간

가상선택자: hover

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

• hover는 마우스를 올렸을 때 동작을 설절

Transition 예시

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

• 마우스를 올려면 1초 후에 width는 300px로 2초동안 속도 일정하게 변화
• transition은 한 줄로 입력해도 됨(duration, delay 순서는 무조건 duration이 먼저)

Animation

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 이름 설정
• animation-duration 지속시간
• animation-timing-function 속도
• animation-delay 대기시간
• animation-iteration-count 반복횟수
• animation-direction 진행방향(normal-시작부터 끝, reverse-끝부터 시작, alternate-시작에서 끝에서 시작 반복)
• @keyframes는 Animation과 짝꿍(from, to 대신 %로 진행상황 별 설정 가능)

Transform & Animation

• 만약 Animation에 Prefix를 넣으면 @keyframes는 아래와 같이 작성해야 함

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