css로 애니메이션 넣기: transition, animation

voltnuna.tistory.com/55

css transform

---

Transition

transform할 대상에 적용하는 속성으로 transform에 애니메이션을 넣어 부드럽게 처리하고 싶을 때 사용한다.

즉, 특정 요소의 상태(너비나 높이 색상 등등--)가 변화할 때, 그 변화하는 과정을 부드럽게 처리할 수 있다.

<보유 속성>

transition(축약형)	duration, timing-function, delay 순서로 값을 적어주면 된다.
transition-delay	지연시간
transition-duration	지속시간(변화되는데 걸리는 시간, 즉 시간이 길 수록 동작 느리게 보임)
transition-timing-function	linear(등속), ease(가속), 개발자 도구의 Open cubic bezier editor를 통해서 설정가능

See the Pen rNOgdGg by volt-nuna (@ddonni0426) on CodePen.

 

 

---

Animation

transition과는 다르게 구간별로 애니메이션 효과를 줄 수 있다.

축약시는 아래 표 항목의 위에서부터아래 순서대로 작성한다.

animation-name	@keyframe 의 이름
animation-duration	총 재생시간
animation-delay	지연시간
animation-iteration-count	숫자 지정 혹은 무한 infinite
animation-timing-function	linear, ease 같은 애니 재생 속도 설정
animation-direction	애니메이션 진행방향(normal정, reverse역, alternate(왔던 길 돌아감), alternate-reverse)
animation-fill-mode	애니메이션 시작 / 끝 상태 제어 ( none-재생 종료 후 처음으로 돌아감/ forwords - 마지막 상태를 유지 / backwords-다시 원래자리로 돌아감 / both
animation-play-state	running, paused

* 주로 infinite랑 alternate 같이 씀

@keyframes 애니-이름{
0%{
	transform:scale(3);
}
40%{
	transform:translate(100px, 50px);
	background:red;
}
80%{
	transform:translate(100px, - 80px);
    border-radius:100px;
}
100%{
  color:#fff;
  background:dodgerblue;
}
}

그리고 애니메이션을 줄 요소에 animation 속성을 주면 된다.

.target{
	width:100px;
    height:100px;
    animation:애니-이름 2s 2 linear reverse;
}

---