transition / animation

css에 position: absolute;가 포함되어 있다는 가정 하에 작성

transition

display 속성에는 transition 효과를 부여할 수 없다. (사라지고 나타나긴 하지만 특수효과는 없다.)
효과를 부여하고 싶다면 opacity 속성 또는 javascript를 사용하는 것이 좋다 .

transition-property 스타일전환 효과 속성 지정
transition-duration 스타일전환 효과 진행 시간
transition-timing-function 효과 속도
transition-delay 스타일전환 효과 지연 시간

속기법

transition: [property][duration] [timing-function][delay]

• 효과 시간을 먼저 작성하고, 지연시간을 후에 작성한다.
• 여러 개체에 적용시킬 경우 콤마(,)로 분리시켜 작성한다.

---

animation

@keyframes 이름{
0% 또는 from{}
100% 또는 to{}
}
를 css에 작성한다.

@keyframes widthCh{
	0%{
		width:0
	}
	100%{
		width:500px
    }
}

을 적용시키려면 css에

div{
	animation-name: widthCh;
}

를 적용한다.

animation-duration: 효과 진행시간 (ex: 1s)
animation-timing-function: 효과 속도 (ex:linear)
animation-delay: 효과 지연시간 (ex: 1s)
animation-iteration-count: 효과 반복 횟수 (ex: 1 무한반복은 infinite)
animation-direction: 효과 방향 (normal reverse alternate alternate-reverse initial inherit)
animation-fill-mode: 효과 종료 후 상태 (사용 시, 효과 반복 횟수를 infinite가 되지 않게 적용 必)
를 추가로 지정할 수 있다.

속기법

animation: [name][duration] [timing-function][delay] [iteration-count direction][fill-mode];
효과 시간을 먼저 작성하고, 지연시간을 후에 작성한다.

animation-fill-mode

none: 지정되지 않음
forwards: 애니메이션이 키프레임의 100%에 도달했을 때 마지막 키프레임을 유지
backwards: 애니메이션의 키프레임이 0%일 때의 키프레임을 가지고 시작
both: forwards와 backwards 둘 다 적용

timing-function 스타일전환 효과 속도

linear; 속도를 일정하게
ease-in; 시작은 느리게 끝을 빠르게
ease-out; 시작은 빠르게 끝을 느리게
ease-in-out; 시작과 끝을 느리게 중간을 빠르게
ease; 시작과 끝을 빠르게 중간을 느리게

transition-timing-function:
animation-timing-function:
transition:
animation:
에 속성으로 사용한다.