애니메이션 기법

transition : 동작을 할때 그 중간과정을 보이게 하는것
순서를 지켜주어야 한다.
속성 시간 속도 대기시간 (성시속대)
속도 
ease(defalut) :점점 빠르다 느리다 빨라짐
ease-in : 점점 빨라짐
ease-out : 점점 느려짐
ease-in-out : 점점 빠르다 느리다 빨라짐
cubic-bezier(n,n,n,n) : 사용자 정의

animation: 이름 시간 속도 대기시간 (이시속대)
추가 가능한 속성
animation : 이름 시간 속도 대기시간 무한반복 반대 모드
animation-iteration-count : 반복횟수
animation-direction : 방향
animation-fill-mode : 재생후 스타일 모드

strites 이미지를 활용해서 애니메이션 줄 때에는 이미지의 위치가 왼쪽으로 이동하면서 동작하기 때문에 fade-out효과가 없고 animation의 %속상값에 배경이미지를 단계적으로 넣어 애니메이션을 줄 때에는 이미지가 바뀌는 속성값에 opacity가 동작하여 fade-out 효과가 난다.

animation-fill-mode의 속성값은 총 4가지이다. default값은 none이고 forwards, backwards, both가 있다.
animation-delay 속성값이 없을 때에는 forwards와 both는 100%에서 멈추는 특징을 가지고 있고, animation-delay 속성값이 있을 때에는 backwards와 both같은 경우에는 대기시간전부터 0%(from)의 스타일을 준비하고 있다가 play 된다!

2D Transforms
CSS 변환을 사용하면 요소를 이동, 회전, 비율 조정 및 기울일 수 있다.
translate() 메서드는 현재 위치에서 요소를 이동합니다(X축 및 Y축에 지정된 매개변수에 따라)
rotate()메서드는 주어진 각도에 따라 요소를 시계 방향 또는 시계 반대 방향으로 회전한다
scale()메서드는 요소의 크기를 늘리거나 줄인다(너비 및 높이에 대해 지정된 매개 변수에 따라)
scaleX()는 요소의 너비를 늘리거나 줄인다.
scaleY()는 요소의 높이를 늘리거나 줄인다.
skewX()메서드는 지정된 각도만큼 X축을 따라 요소를 기울인다.
skewY()메서드는 주어진 각도만큼 Y축을 따라 요소를 기울인다.
skew()메서드는 지정된 각도만큼 X축과 Y축을 따라 요소를 기울인다.
matrix()방법은 모든 2D 변환 방법을 하나로 결합한다.
matrix() 메서드는 요소를 회전, 크기 조정, 이동(변환) 및 기울일 수 있는 수학 함수를 포함하는 6개의 매개 변수를 사용한다.
매개변수는 다음과 같다: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
CSS transform속성을 사용하면 다음과 같은 3D 변환 방법을 사용할 수 있다.
rotateX()메서드는 지정된 각도에서 X축을 중심으로 요소를 회전한다.
rotateY()메서드는 지정된 각도에서 Y축을 중심으로 요소를 회전한다.
rotateZ()메서드는 주어진 각도에서 Z축을 중심으로 요소를 회전한다.


http://rwdb.kr/ 반응형 웹사이트 
부트스트랩
사이트 잘찾기