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 )

animation-delay: 애니메이션 시작하기 전 지연시간 설정, 3초로 설정하면 3초후에 애니메이션 실행

animation-iteration-count: 반복 횟수( number / infinite )

animation-direction: 반복 방향 설정 ( 정방향 / 역방향 / 번갈아가며)

animation-fill-mode: 애니메이션 시작 / 끝 상태 제어 ( none / forwords / backwords / both )

8개의 속성은 animation 속성 1개로 표현할 수 있습니다.


animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease;


animation: rotate 2s infinite ease;

2-1. animation-timing-function

애니메이션 진행속도, 가속방식등을 지정하는 속성입니다. 미리 설정된 속도커브 중 한가지를 선택할 수 있습니다.

linear

일정한 속도로 애니메이션을 재생합니다.

ease (default)

애니메이션이 느리게 시작했다 빨라지고, 다시 느리게 끝남. 시작 부분에서는 더 짧은 시간에 빨라지며, 끝나는 부분에서는 더 긴 시간 동안 느려집니다.

ease-in

애니메이션이 느리게 시작합니다.

ease-out

애니메이션이 느리게 끝납니다.

ease-in-out

애니메이션이 느리게 시작했다 빨라지고 마지막에는 느리게 끝납니다. ease 속성과 다른 점은 시작과 끝나는 부분의 속도 증가/감소가 대칭입니다.

각 예제는 아래에서 확인할 수 있습니다.

animation-timing-function - CSS: Cascading Style Sheets | MDN

The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

2-2. animation-direction

animation-direction 속성은 애니메이션이 앞 또는 뒤, 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.

예제를 확인해보겠습니다. 빨간색 원이 파란색 원으로 바뀌는 애니메이션을 적용하였습니다.


background-color: red;
animation: changeColor 2s;

@keyframes changeColor {
  0% {
    background-color: red;
  }

  100% {
    background-color: blue;
  }
}

normal (default)

애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.

reverse

애니메이션은 매 사이클마다 역방향으로 재생됩니다.

즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은 ease-out형태로 변경됩니다.

빨간색에서 파란색으로 변경되는 애니메이션인데 반대로 파란색에서 빨간색으로 바뀌는걸 확인하실 수 있습니다.

alternate

애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다.

사이클을 확인하기 위해 animation-iteration-count를 3으로 지정해주었습니다.

alternate 적용 전

alternate 적용 후

alternate를 적용하면 사이클마다 방향을 바뀌어 애니메이션이 자연스럽게 반복되는 것을 확인할 수 있습니다.

alternate-reverse

애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다.

alternate와 반대로 애니메이션을 실행합니다. 파란색부터 시작되는 것을 확인할 수 있습니다.

2-3. animation-fill-mode

animation-fill-mode 속성은 애니메이션 시작 전, 또는 애니메이션 종료 후에 요소에 CSS 스타일을 지정합니다.

CSS 애니메이션 요소에 적용되는 CSS는 애니메이션 시작 전, 애니메이션 동작 중, 애니메이션 종료 후로 구분할 수 있으며, 각각 적용되는 CSS 스타일이 다를 수 있습니다.

none (default)

애니메이션이 재생되기 전과 후에 요소에 어떤 스타일도 적용하지 않습니다.

빨간색에서 파란색으로 변경되었다가 애니메이션 시간(2s)이 종료되면 다시 빨간색으로 돌아온 것을 볼 수 있습니다.

forwards

애니메이션 중이 아닌 경우, 애니메이션 마지막 키프레임의 CSS 스타일을 유지합니다.

backwards

애니메이션 중이 아닌 경우, 첫 번째 애니메이션 키프레임의 CSS 스타일을 유지합니다.(지연 시간 포함)

both

"forwards"와 "backwards"를 모두 적용한 것입니다.

애니메이션 시작 전에는 첫 번째 애니메이션 키프레임을 유지하며, 종료 후에는 마지막 키프레임 애니메이션의 CSS 스타일을 유지합니다. "none" 과는 다릅니다.

마무리

References

CSS 애니메이션 구현 - @keyframes 와 animation 속성을 이용하여

안녕하세요, 프로독학러 입니다. 이번 포스팅에서는 CSS 애니메이션과 @keyframes 에 대해서 알아보도록 하겠습니다. 1. @keyframes @keyframes 는 CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법입니다. @keyframes 를 사용하기 위해선 세 가지가 필요합니다. animation-name : 사용자가 직접 지정한 이름, @keyframes 가 적용될 애니메이션의 이름 스테이지 : from - to 로 0~100% 의 구간 CSS 스타일 : 각 스테이지(구간)에 적용시킬 스타일 코드를 통해 살펴보도록 하겠습니다. 12345678@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; }}cs 위..

https://pro-self-studier.tistory.com/108

CSS 애니메이션(animation) 속성 이해하기

키프레임 애니메이션을 정의한 후 요소에 애니메이션을 적용하려면 "animation" 속성을 이용해 키프레임 애니메이션을 연결해야합니다. "animation" 속성은 아주 많은 옵션 값을 가지고 있기 때문에, 다양한 애니메이션 효과를 만들 수 있습니다. CSS 애니메이션에서 사용할 수 있는 키프레임 애니메이션 속성은 다음 8개가 있습니다. 키프레임 애니메이션 전용 속성이므로 키프레임 애니메이션이 연결되지 않은 경우 적용되지 않습니다. 속성 설명 속성 값 animation-name 키프레임 애니메이션 이름을 지정. 특수문자를 제외한 문자열, 숫자, -,_ 를 조합해 1글자 이상. animation-duration 애니메이션 재생 시간, 또는 반복 루프 1회를 도는 시간 0, 3s, 1.5s, 300ms 기본..

https://blogpack.tistory.com/882

CSS 애니메이션 초보자 입문서

요즘에는 점점 더 많은 웹사이트들이 GIF, SVG, WebGL, 배경 비디오 등의 형태를 이용하여 애니메이션을 사용하고있습니다. 제대로 사용한다면 웹 상의 애니메이션들은 웹사이트의 활력을 불어넣고 상호작용을 이끌어낼 수 있으며 이는 별도의 피드백 요소와 경험을 사용자에게 추가로 제공하는 역할을 할 수 있을 것입니다. 이 튜토리얼에서는 CSS...

https://webdesign.tutsplus.com/ko/tutorials/css-----cms-21068