CSS3 : Modal Animation

레이어 팝업 CSS3 애니메이션

CSS3 를 이용한 모달 애니메이션에 대해 살펴보도록 합니다.

소스는 코드펜의 css 를 참고하세요.

Modal Animation Source

See the Pen 모달 애니메이션 by jaeheekim (@jaehee) on CodePen.

css

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html, body {
	min-height: 100%;
	height: 100%;
	font-family: helvetica neue, helvetica, arial, sans-serif;
}

.content {
	min-height: 100%;
	height: 100%;
	background: #fff;
	position: relative;
	z-index: 0;
}
.content h1 {
	padding: 75px 0 30px 0;
	text-align: center;
	font-size: 30px;
	line-height: 30px;
}
.content .buttons {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.content .buttons .button {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	background: #efefef;
	padding: 10px 15px;
	margin: 10px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	color: #333;
	font-weight: bold;
}
.content .buttons .button:hover {
	color: #fff;
	background: #009bd5;
}

/* modal style */
html.modal-active,
body.modal-active {
	overflow: hidden;
}
#modal-container {
	position: fixed;
	left: 0;
	top: 0;
	display: table;
	height: 100%;
	width: 100%;
	z-index: 1;
	/* hidden 처리 */
	transform: scale(0);
}
#modal-container .modal-background {
	display: table-cell;
	background: rgba(0, 0, 0, .8);
	text-align: center;
	vertical-align: middle;
}
#modal-container .modal-background .modal {
	background: #fff;
	padding: 50px;
	display: inline-block;
	border-radius: 3px;
	position: relative;
}
#modal-container .modal-background .modal h2 {
	font-size: 25px;
	line-height: 25px;
	margin-bottom: 15px;
	
}
#modal-container .modal-background .modal p {
	font-size: 18px;
	line-height: 22px;
}


/*
 * ------------------------------
 * Unfolding Animation
 * ------------------------------
 */
#modal-container.one {
	/*transform: scaleX(0) scaleY(1);*/
	animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one .modal-background .modal {
	/* 초기 display: none 처럼 크기를 0 으로 하여 보여주지 않음*/
	transform: scale(0);
	/* 0.5 초 동안 애니메이션을 실행, 단 0.8초 지연시켜 0.8초 후에 애니메이션을 실행 */
	animation: zoomIn .5s .8s  cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out {
	transform: scale(1);
	animation: unfoldOut 1s .3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.one.out .modal-background .modal {
	animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* Dimmed showing */
@keyframes unfoldIn {
	0% {
		transform: scaleX(0) scaleY(0.005);
	}
	50% {
		/* 0.5 초간 세로 크기는 작은상태로 가로 너비만 확대  */
		transform: scaleX(1) scaleY(0.005);
	}
	100% {
		/* 0.5 초간 세로 크기를 확대 */
		transform: scaleY(1) scaleX(1);
	}
}
/* Show modal content  */
@keyframes zoomIn {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
/* Hide modal content */
@keyframes zoomOut {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0);
	}
}
/* Dimmed hiding */
@keyframes unfoldOut {
	0% {
		transform: scale(1)
	}
	50% {
		transform: scaleX(1) scaleY(0.005);
	}
	100% {
		transform: scaleX(0) scaleY(0.005);
	}
}


/*
 * ------------------------------
 * Revealing Animation
 * ------------------------------
 */
#modal-container.two {
	transform: scale(1);
}
#modal-container.two .modal-background {
	background: transparent;
	animation: fadeIn .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two .modal-background .modal {
	/* 콘텐츠를 초기에 보여주지 않음 */
	opacity: 0;
	animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.content.two {
	/* 콘텐츠 크기를 줄임 */
	animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out {
	/* 전체 모달 컨테이너를 숨김 처리(다른 애니메이션이 모두 끝난 0.5초 후에 처리하기 위해 0.5초 지연시킴 */
	animation: quickScaleDown 0s .5s linear forwards;
}
#modal-container.two.out .modal-background {
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.two.out .modal-background .modal {
	animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.content.two.out {
	animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* Dimmed showing */
@keyframes fadeIn {
	0% {
		background: transparent;
	}
	100% {
		background: rgba(0, 0, 0, .7);
	}
}
/* Show modal content from bottom to top */
@keyframes scaleUp {
	0% {
		/* 모달 콘텐츠를 하단에 위치시킴 */
		transform: scale(.8) translateY(1000px);
		opacity: 0;
	}
	100% {
		/* 모달 콘텐츠를 본래 위치로 돌려놓음 */
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}
/* Shrink content */
@keyframes scaleBack {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(.8);
	}
}
/* Hide modal container*/
@keyframes quickScaleDown {
	0% {
		transform: scale(1);
	}
	99.9% {
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
/* Dimmed hiding */
@keyframes fadeOut {
	0% {
		background: rgba(0, 0, 0, .7);
	}
	100% {
		background: transparent;
	}
}
/* modal content from top to bottom */
@keyframes scaleDown {
	0% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
	100% {
		transform: scale(.8) translateY(1000px);
		opacity: 0;
	}
}

@keyframes scaleBack {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(.85);
	}
}
@keyframes scaleForward {
	0% {
		transform: scale(0.85);
	}
	100% {
		transform: scale(1);
	}
}

/*
 * ------------------------------
 * Uncovering Animation
 * ------------------------------
 */
#modal-container.three {
	z-index: 0;
	transform: scale(1);
}
#modal-container.three .modal-background {
	background: rgba(0, 0, 0, .9);
}
#modal-container.three .modal-background .modal {
	animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.content.three {
	z-index: 1;
	animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.three.out .modal-background .modal {
	animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.content.three.out {
	animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* Show Modal content*/
@keyframes moveUp {
	/* 하단에서 */
	0% {
		transform: translateY(200px);
	}
	/* 중앙으로 위치 */
	100% {
		transform: translateY(0);
	}
}
/* Slide up Content */
@keyframes slideUpLarge {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-100%);
	}
}
/* Hide Modal content */
@keyframes moveDown {
	/* 중앙에 있는 모달 콘텐츠를 */
	0% {
		transform: translateY(0);
	}
	/* 하단으로 위치 */
	100% {
		transform: translateY(200px);
	}
}
/* Slide down content */
@keyframes slideDownLarge {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(0);
	}
}

/*
 * ------------------------------
 * Blow Up Animation
 * ------------------------------
 */
#modal-container.four {
	z-index: 0;
	transform: scale(1);
}
#modal-container.four .modal-background {
	background: rgba(0, 0, 0, 0.9);
}
#modal-container.four .modal-background .modal {
	animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.content.four {
	z-index: 1;
	animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four.out .modal-background .modal {
	animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.content.four.out {
	animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* Show modal content */
@keyframes blowUpModal {
	0% {
		transform: scale(0);
	}
	100% {
		transform: scale(1);
	}
}
/* Hide content */
@keyframes blowUpContent {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	/* 원본 크기에서 2배로 커지면서 투명도를 서서히 낮춤 */
	99.9% {
		transform: scale(2);
		opacity: 0;
	}
	/* 마지막에 숨김 처리 */
	100% {
		transform: scale(0);
	}
}
/* Hide modal content */
@keyframes blowUpModalTwo {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(0);
		opacity: 0;
	}
}
/* Show content */
@keyframes blowUpContentTwo {
	0% {
		transform: scale(2);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/*
 * ------------------------------
 * Meep Meep Animation
 * ------------------------------
 */
#modal-container.five {
	transform: scale(1);
}
#modal-container.five .modal-background {
	background: transparent;
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five .modal-background .modal {
	transform: translateX(-1500px);
	animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out {
	animation: quickScaleDown 0s .5s linear forwards;
}
#modal-container.five.out .modal-background {
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.five.out .modal-background .modal {
	animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* 모달 콘텐츠 반동 효과로 나타나기 */
@keyframes roadRunnerIn {
	0% {
		transform: translateX(-1500px) skewX(30deg) scaleX(1.3);
	}
	70% {
		transform: translateX(50px) skewX(0deg) scaleX(0.9);
	}
	100% {
		transform: translateX(0px) skewX(0deg) scaleX(1);
	}
}
/* 모달 콘텐츠 반동 효과로 숨기기 */
@keyframes roadRunnerOut {
	0% {
		transform: translateX(0px) skewX(0deg) scaleX(1);
	}
	30% {
		transform: translateX(-100px) skewX(-5deg) scaleX(0.9);
	}
	100% {
		transform: translateX(1500px) skewX(30deg) scaleX(1.3);
	}
}

/*
 * ------------------------------
 * James Bond Animation
 * ------------------------------
 */
#modal-container.six {
	transform: scale(1);
}
#modal-container.six .modal-background {
	background: transparent;
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six .modal-background .modal {
	/* 초기 모달 콘텐츠 크기 및 라운드 정의 */
	width: 200px;
	height: 200px;
	border-radius: 100%;
	overflow: hidden;
	animation: JamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six .modal-background .modal h2,
#modal-container.six .modal-background .modal p {
	/* 콘텐츠 내용 숨김 */
	opacity: 0;
	position: relative;
	/* 원형 모달이 본래 모양을 완성된 후 1.4 지연후에 보여줌 */
	animation: modalContentFadeIn .5s 1.4s linear forwards;
}
#modal-container.six.out {
	animation: slowFade .5s 1.5s linear forwards;
}
#modal-container.six.out .modal-background {
	background-color: rgba(0, 0, 0, 0.7);
	animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six.out .modal-background .modal {
	border-radius: 3px;
	height: 162px;
	width: 227px;
	animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.six.out .modal-background .modal h2,
#modal-container.six.out .modal-background .modal p {
	animation: modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
/* Show modal content : round shape */
@keyframes JamesBond {
	0% {
		transform: translateX(1000px);
	}
	80% {
		transform: translateX(0px);
		width: 150px;
		height: 150px;
		border-radius: 100%;
	}
	90% {
		border-radius: 3px;
		width: 340px;
		height: 240px;
	}
	100% {
		border-radius: 3px;
		width: 300px;
		height: 200px;
	}
}
/* 모달 콘텐츠 내의 요소 효과 처리 */
@keyframes modalContentFadeIn {
	0% {
		opacity: 0;
		top: -20px;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}
/* 전체 모달 컨테이너 숨김처리 */
@keyframes slowFade {
	0% {
		opacity: 1;
	}
	99.9% {
		opacity: 0;
		transform: scale(1);
	}
	100% {
		transform: scale(0);
	}
}
/* 박스 그림자를 이용한 효과 */
@keyframes fadeToRed {
	0% {
		box-shadow: inset 0 0 0 rgba(201, 24, 24, 0.8);
	}
	100% {
		/* y 축 박스 그림자를 위에서부터 아래로 내리는 효과 */
		box-shadow: inset 0 2000px 0 rgba(201, 24, 24, 0.8);
	}
}
/* 모달 콘텐츠 비스듬히 하단으로 떨어뜨림 */
@keyframes killShot {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		/* 하단으로 회전시켜 떨어뜨림 */
		transform: translateY(400px) rotate(45deg);
		opacity: 0;
	}
}
/* 모달 콘텐츠가 떨어질 때 효과처리 */
@keyframes modalContentFadeOut {
	0% {
		opacity: 1;
		top: 0;
	}
	100% {
		opacity: 0;
		top: -20px;
	}
}

Jaehee's WebClub