transform

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.

<transform-function>

요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해진다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같다.
https://developer.mozilla.org/ko/docs/Web/CSS/transform-function

• Rotation
  rotate(a)
  a : 회전각도. 양수이면 시계방향, 음수이면 시계반대방향.
  The <angle> CSS data type represents an angle value expressed in degrees(deg), gradians(grad), radians(rad), or turns(turn).

• Scaling(resizing)
  scale(sx,sy)
  넣어준 숫자 비율에 따라 크기조절.
  sx : A <number> representing the abscissa of the scaling vector.

• Skewing(distortion)
  skew(ax,ay)
  ax : <angle> representing the angle to use to distort the element along the x-axis (or abscissa).
  이게 어떻게 작용하는지 잘 모르겠는데 일단 이렇게 이해했다.
  x선 위에 출렁이는 네모 젤리를 하나 올려두었다 치고,
  x축 방향으로 당기면 젤리가 반대방향쪽으로 기울어진다.

• Translation(moving)
  translate(<length-percentage> , <length-percentage>?) 이동

transition

정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다.
transition 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

1. transition-property: 요소에 추가할 전환(transition) 효과를 설정함.
2. transition-duration: 전환(transition) 효과가 지속될 시간을 설정함.
3. transition-timing-function: 전환(transition) 효과의 시간당 속도를 설정함.
4. transition-delay 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.

엘리먼트의 각 상태는 가상 클래스를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것.

animation

요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있다.
@keyframes 규칙: animation-name으로 연결. from+to | 0%~100%
animation 모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음.

1. animation-name: 애니메이션 효과의 이름을 설정함.
2. animation-duration: 애니메이션 효과를 재생할 시간을 설정함.
3. animation-delay: 애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
4. animation-iteration-count: 애니메이션 효과가 몇 번 반복될지를 설정함.
5. animation-direction: 애니메이션의 진행 방향을 설정함.
6. animation-timing-function: 애니메이션 효과의 시간당 속도를 설정함.
7. animation-fill-mode: 애니메이션 효과가 재생 중이 아닐 때 요소의 스타일을 설정함.
8. animation-play-state: 애니메이션 효과의 재생 상태를 설정함.

Web animation made easy! https://jeremyckahn.github.io/stylie/

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.
즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.
http://tcpschool.com/css/css3_module_vendorPrefix

<style>
    .button {
        background: red;          <!-- gradient 속성을 지원하지 않는 모든 브라우저를 위한 코드 -->
        background: -webkit-linear-gradient(red, yellow); <!-- 크롬과 사파리 4.0 이상을 위한 코드 -->
        background: -moz-linear-gradient(red, yellow);    <!-- 파이어폭스 3.6 이상을 위한 코드 -->
        background: -ms-linear-gradient(red, yellow);     <!-- 익스플로러 10.0 이상을 위한 코드 -->
        background: -o-linear-gradient(red, yellow);      <!-- 오페라 10.0 이상을 위한 코드 -->
        background: linear-gradient(red, yellow);         <!-- CSS 표준 문법 코드 -->
    }
</style>