@keyframe안에 변형속성 값 종류
- 위치속성
top, left,bottom,right
- 크기속성
width, height, background-size
- 박스속성
margin, padding
- 테두리속성
border-width, border-radius, border-color
- 색상속성
color, background-color
- 투명도속성
opacity
- 변환속성 : 여러개 동시입력가능하며, 순서대로 실행된다.
transform:translate(X크기,Y크기) : x,y크기만큼 이동
transform:translateX(X크기) : x크기만큼 이동
transform:translateY(Y크기) : y크기만큼 이동
transform:scale(X크기,Y크기) : x,y배율만큼 늘어나거나 줄어듬
transform:scaleX(X크기) : x크기만큼 확대나 축소
transform:scaleX(Y크기) : y크기만큼 확대나 축소
transform:skew(X각도,Y각도) : x,y만큼 기울이기 deg
transform:skew(X각도) : x만큼 기울이기 deg
transform:skew(Y각도) : y만큼 기울이기 deg
transform:rotate(각도) : 각도만큼 회전 단위 deg
transform-origin : 회전시 중심점을 지정해준다. 순서대로 x값 y값 (회전시 기본값은 중앙)
{ [1] animation }
축약형 예시
animation : name duration timing-function delay iteration-count direction;
축약형에 들어갈 속성설명
name > duration > timing-function > delay > count > direction > fill-mode > play-state
이름 > 실행속도 > 속도곡선타입 > 딜레이시간 > 반복횟수 > 진행방향 > 끝난후위치 > 실행or정지
- animation-name @keyframes 로 만든 애니메이션 이름
div {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;}
- animation-delay 애니메이션 시작하기전 딜레이할 시간
div {
-webkit-animation-delay: 1s;
animation-delay: 1s;}
- animation-duration 애니메이션 실행되는 시간. (애니메이션 한턴이 몇초에 걸쳐 끝나는지)
div {
-webkit-animation-duration: 2s;
animation-duration: 2s;}
- animation-play-state 애니메이션 일시 중지 or 실행 제어
속성값
paused // 애니메이션 일시중지
running // 애니메이션 실행 (기본값)
div:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;}
- animation-direction 애니메이션 실행 순서를 그대로할지 반대로 할지 설정.
속성값
normal // @keyframes 에 정의된 그대로 실행 (기본값)
reverse // 반대로 실행 (기본값이 좌->우 로 움직이는 경우 reverse는 우->좌 로 움직임)
alternate // normal 값과 reverse 값을 번갈아실행 ( 좌->우 , 우->좌 )
alternate-reverse // reverse 값과 normal 값을 번갈아실행 ( 우->좌 , 좌->우 )
div {
-webkit-animation-direction: alternate;
animation-direction: alternate;}
-
animation-fill-mode 애니메이션이 동작하지 않고 있을때, 애니메이션의 상태 설정
(애니메이션이 끝났을때 or 딜레이 중일때 )
속성값
none // 애니메이션 끝난 후, 시작할 때의 상태로 돌아옴.
forwards // 애니메이션 끝난 후, 끝난 상태 그대로 유지.
backwards // 애니메이션 끝난 후, 시작할 때의 상태로 돌아옴
both // forwards backwards 둘다 적용하여 양방향으로 속성을 확장.
div {
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;}
- animation-iteration-countmode 애니메이션 실행 횟수
속성값
number // 지정한 숫자만큼 반복실행. (기본값은 1)
infinite // 무한반복
div {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;}
- animation-timing-function 애니메이션 속도 곡선 제어
속성값
linear // 시작부터 끝까지 일정속도
ease // 천천히 시작, 중간에 빨라짐, 천천히 끝 (기본값)
ease-in // 천천히 시작
ease-out // 천천히 끝
ease-in-out // 천천히 시작, 중간 보통 , 천천히 끝
cubic-bezier(x1,y1,x2,y2) // 원하는 속도를 만들고 싶을때 큐빅베지어를 이용하여 포지션 값을 제어.
div {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;}
