horizontal Bounce Arrow Animation

Comma separated @keyframe rule

@keyframe 은 백분율로 애니메이션 상태를 지정할 수 있습니다.

여기서 더 나아가 바운스 애니메이션을 구현하는데 있어서 콤마(,)를 구분자로 키프레임을 좀 더 간결하게 작성할 수 있는 방법에 대해 알아보도록 합니다.

Source

See the Pen Comma separated @keyframe rule by jaeheekim (@jaehee) on CodePen.

@keyframe

위의 소스에 키프레임은 간결하게 작성되어 있습니다. 위 해당 키프레임을 아래와 같이 작성할 수도 있습니다.

css

@-webkit-keyframes horizontalBounce {
	0% {
		-webkit-transform: translateX(0);
	}
	10% {
		-webkit-transform: translateX(0);
	}
	20% {
		-webkit-transform: translateX(10px)
	}
	30% {
		-webkit-transform: translateX(0);
	}
	40% {
		-webkit-transform: translateX(10px);
	}
	50% {
		-webkit-transform: translateX(0);
	}
	60% {
		-webkit-transform: translateX(10px);
	}
	70% {
		-webkit-transform: translateX(0);
	}
	80% {
		-webkit-transform: translateX(10px);
	}
	90% {
		-webkit-transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(0);
	}
}

위 소스는 코드펜이 작성되어 있는 키프레임보다 좀 더 복잡해 보입니다.

이 키프레임의 백분율에 대한 스타일은 X축으로 0.5s 마다 10px 이동했다가 0px 로 다시 돌아오는 수평으로 된 바운스 스타일입니다.

해당 키프레임의 스타일중에 translateX(0),translateX(10px) 의 백분율이 반복되는 것을 확인하실 수 있습니다.

이를 더 간결하게 작성하기 위해서는 아래와 같이 콤마(,)를 구분자로 선언하여 정의할 수 있습니다.

css

@-webkit-keyframes horizontalBounce {
	0%, 10%, 30%, 50%, 70%, 90%, 100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	
	20%, 40%, 60%, 80% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
}

참고로 0% ~ 10% 에 translateX(0) 90% ~ 100% 에 translateX(0) 이 정의된 이유는 애니메이션을 무한 반복시키면서 시각적으로 delay 를 구현한 것처럼 움직이지 않도록 스타일을 정의한 것입니다.

Jaehee's WebClub