동영상 첨부로 인해 레이아웃이 깨지는 현상이 발생합니다. 해당 링크에서 확인하시면 됩니다.

CSS에서 애니메이션을 구현하려면 animation 속성와 keyframes에 대해 알아야 합니다

여러 애니메이션을 구현하기위해 animation과 Keyframes 속성에 대해 알아보겠습니다!

1. @Keyframes

keyframes는 CSS 애니메이션 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다.

keyframes를 사용하기 위해선 3가지가 필요합니다.

• animation name: 사용자 지정 애니메이션 이름
• stage: from ~ to, 0 ~ 100%의 구간(스테이지)
• style: 각 스테이지에 적용시킬 스타일

@keyframes [animation name]{
  stage {
		style
	}
}

예제를 살펴보겠습니다.

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

애니메이션 이름이 fadeOut이고, 0 ~ 100% 구간에 opacity 속성을 변경하는 애니메이션입니다. 아래와 같이 from ~ to를 사용할수도 있습니다.

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 1;
	}
}

2. Animation

animation 속성은 keyframes 애니메이션의 지속시간, 속도 조절 등을 지정할 수 있습니다.

• animation-name: @keyframes 이름
• animation-duration: 키프레임이 동작하는 시간
• animation-timing-function: 애니메이션 속도 조절 / 그래프 ( linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier )