css3 animation / tranform / transition

각종 css3를 자동으로 만들어주는 사이트 http://www.css3maker.com/css3-animation.html

참고 사이트 http://daneden.github.io/animate.css/

css3 animation

- css3 animation을 적용하기 위해선 속성 변화를 주기 위해 키프레임 생성! (접두어 써야함)

• animation-name: 애니메이션이름
• animation-duration : 진행시간(2s,3s...)
• animation-iteration-count : 반복횟수(infinite:무한반복)
• animation-timing-function : 속도형태
• animation-direction : 방향지정
• animation-play-state : 애니메이션 진행상태
• animation-delay : 애니메이션 시작전 지연시간
• animation-fill-mode : 애니메이션이 끝났을 때 요소의 위치(자세한 속성은 아래에)

- 속도형태 속성

• ease (시작과 종료 부드럽게)
• linear (일정하게)
• ease-in (서서히 시작)
• ease-out (서서히 종료)
• ease-in-out (서서히 시작하여 서서히 종료)

- 방향지정 속성

• normal (정방향)
• reverse (to에서 시작하여 from으로 끝남)
• alternate (처음은 정방향 그 다음은 역방향)
• alternate-reverse (처음은 역방향 그 다음은 정방향)

- 애니메이션 진행상태 속성

• running (재생중)
• paused (일시정지중)

- 애니메이션 끝났을 때 요소의 위치 속성

• forwards (애니메이션 시작 전 까지는 원래 위치에서 대기 / 요소가 애니메이션 끝나는 위치에서 멈춤)
• backwards (페이지가 로딩되면 곧장 애니메이션 시작 위치로 이동 / 끝나면 원래 위치로 돌아감)
• both (위 둘 효과를 모두 적용)
• none (애니메이션 시작 전 까지는 원래 위치에 고정 / 끝나면 그 위치로 다시 돌아감 = 기본상태)

- 키프레임

@keyframes 애니메이션이름 {
    0% {}
    5% {}
    //각 %마다 움직임을 주고 싶으면 {이 안에 해당하는 값을 써주면 됨}
}

한 줄로 정의할 경우

animation:rotateWord 18s linear infinite 0s;

• animation-name: rotateWord
• animation-duration : 18s
• animation-iteration-count : infinite
• animation-timing-function : linear
• animation-delay : 0s

css3 transform

- 회전, 확대/축소, 기울임, 위치변경과 같은 변경 처리 (접두어 써야함)

1. rotate 회전

- 각도의 범위는 0~360도중 하나의 각도 선택할 수 있으며, 마이너스 각도는 시계 반대 방향으로 회전 할 수 있음

transform:rotate(45deg);

2. scale 확대/축소

- 이미지(개체)의 크기를 조절할 수 있으며, 비율을 지정하여 크기를 조절하고 n배로 확대 수치 지정/ 소수점도 가능

transform:scale(1.5);
transform:scaleX(3); //가로의 3배 확대 / Y로 쓰면 세로의 3배 확대

3. skew 기울임

- 주어진 각도로 기울일 수 있으며, X축은 좌/우로 Y축은 상/로 기울이는 효과를 줌

- X축 : + 각도는 우측 / - 각도는 좌측

- Y축 : + 각도는 아래쪽으로 / - 각조는 윗쪽

transform:skewX(+-10deg);

4. translate 위치이동

- 위치를 이동시킬 수 있으며, 좌/우/상/하로 위치 조정

- scale과 마찬가지로 X축, Y축으로 지정가능함

transform:translate(10px, 20px); tranform:translateX(10px);

css3 transition

- 마우스를 클릭하거나 hover 상태에 변화를 주는 것

• transition-property : 색상이나 위치 등 변화의 대상이 되는 css 속성 지정
• transition-duration : 변화할 때 걸리는 시간을 초단위로 지정
• transition-delay : 변화되기 전 시간을 초단위로 지정
• transition-timing-function : 진행시간 (속성값은 animation 속도형태 속성과 동일)

한 줄로 정의할 경우

transition:opacity 2s 1s ease;

• transition-property : opaticy
• transition-duration : 2s
• transition-delay : 1s
• transition-timing-function : ease