transition.css

간단 설명

---

@charset "UTF-8";
/* common */
.dialog .dim,
#dim {background-color:#000; position:fixed; left:0; top:0; right:0; bottom:0; opacity:0; z-index:-1; pointer-events:none;
	-webkit-transition:opacity .3s ease-in .2s, z-index 0s ease .5s; 
	transition: opacity .3s ease-in .2s, z-index 0s ease .5s; 
}
.dialog.active .dim,
#dim.active { 
	z-index:150;
	opacity:.7;
	-webkit-transition:opacity .3s ease 0s, z-index 0s; 
	transition:opacity .3s ease 0s, z-index 0s; 
	-webkit-pointer-events:auto;
	pointer-events:auto;
}

/* Accordion : 트랜지션 추가 예정 */
.accordion .content .item {display:none;}
.accordion .content.active .item {display:block;}

/* Transition-nav */
#gnb {
	width:80%;
	will-change: transform;
	visibility:hidden;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s;
	transition: transform .5s ease, visibility 0s linear .5s;
}
#container.active #gnb {
	visibility:visible;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 0s;
	transition:-webkit-transform .5s ease, visibility 0s linear 0s;
}
.menuClose {
	visibility:hidden;
	position:fixed; left:85%; top:17px; 
	z-index:160; 
	opacity:0; 
	pointer-events:none; 
	width:17px; height:17px; 
	font:0/0 a; text-align:center; 
	background-image:url('/static/images/common/icon_sprite.png'); 
	background-position:-125px 0; 
	background-repeat:no-repeat; 
	background-size:360px auto; 

	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s, opacity 0.3s;
	transition: transform .5s ease, visibility 0s linear .5s, opacity 0.3s;

}
#container.active .menuClose {
	visibility:visible; 
	opacity:1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 0s, opacity 0.3s;
	transition:-webkit-transform .5s ease, visibility 0s linear 0s, opacity 0.3s;

}

/* Dialog */
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.dialog,
.dim {
	display:block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.toast,
.dialog {
	z-index:250;
	position: fixed;
	pointer-events: none;
	/*-webkit-visibility: hidden;
	visibility: hidden; 이거 쓰면 딤 사라질때 띡 사라짐*/
}
.dialog.active {
	/*-webkit-visibility: visible;
	visibility:visible;*/
}

.dialog a, .dialog button {
	color: #74716D;
	text-decoration: none;
	outline: none;
}

.dialog a:hover, .dialog a:focus {
	outline: none;
}
.btnDialog {
	font-size:2rem;
	padding:1rem 2.5rem;
	color:#fff;
	background-color:cadetblue;
}
.btnDialog:active,
.btnDialog:hover {
	background-color:darkcyan;
}
.dialog .layout {
	z-index:300;
	background-color:#fff;
	position:relative;
	pointer-events:auto;
}
.dialog.active .layout {
	opacity:1;
}


/* type1 : 아래에서 위로 서서히  */
.dialog.type1 .layout {

}
.dialog.type1.active .layout { 
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-name:dia1-open;
	animation-name:dia1-open;
}

@-webkit-keyframes dia1-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes dia1-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes diacon1 {
	0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes diacon1 {
	0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* type2 : 가운데에서 서서히 나타남 */
.dialog.type2.active .layout {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
}

.dialog.type2.active .layout {
	-webkit-animation-name: dia2-open;
	animation-name: dia2-open;
}

@-webkit-keyframes dia2-open {
	0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}

@keyframes dia2-open {
	0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

/* Dialog toLeft : 오른쪽에서 나타남*/
.dialog.toLeft {
}
.dialog.toLeft .dim {
	opacity:0;
	-webkit-transition:opacity .5s ease-in .2s; 
	transition: opacity .5s ease-in .2s; 
}
.dialog.toLeft.active .dim {
	opacity:.7;
	visibility: visible;
	-webkit-transition:opacity .5s ease 0s; 
	transition:opacity .5s ease 0s; 
}
.dialog.toLeft .layout {
	opacity:1;
	z-index:250;
	pointer-events:none;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform .5s ease;
	transition:transform .5s ease;
}
.dialog.toLeft.active .layout {
	pointer-events:auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Dialog page.toTop : 아래에서 맨위까지*/
.dialog.page.toTop {
	pointer-events:none;
}
.dialog.page.toTop.active {
	pointer-events:auto;
}
.dialog.page.toTop .dim {
	opacity:0;
	-webkit-transition:opacity .5s ease-in .2s; 
	transition: opacity .5s ease-in .2s; 
}
.dialog.page.toTop.active .dim {
	opacity:.7;
	-webkit-transition:opacity .5s ease 0s; 
	transition:opacity .5s ease 0s; 
}
.dialog.page.toTop .layout {
	opacity:0;
	z-index:250;
	pointer-events:none;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.dialog.page.toTop.active .layout {
	opacity:1;
	pointer-events:auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Dialog toTop : 맨밑에 딱 붙음 */
.dialog.toTop.active {
	display:block;
}
.dialog.toTop .layout {
	position:fixed; left:0; bottom:0; width:100%;
	visibility:hidden;
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 1s;
	transition:transform .5s ease, visibility 0s linear 1s;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
.dialog.toTop.active .layout {
	visibility:visible;
	-webkit-transition: -webkit-transform .4s ease, visibility 0s linear 0s;
	transition:transform .4s ease, visibility 0s linear 0s;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.dialog.toTop .layout .dialogClose {
	display:none;
}
.dialog.toTop.active .layout .dialogClose {
	display:block;
}
.dialog.toTop .dim {
	opacity:0;
	-webkit-transition:opacity .2s ease .4s; 
	transition: opacity .2s ease .4s; 
}
.dialog.toTop.active .dim {
	opacity:.7;
	-webkit-transition: opacity .2s ease 0s;
	transition: opacity .2s ease 0s;
	-webkit-pointer-events:auto;
	pointer-events:auto;
}

/* Dialog toBottom : 맨위에서 아래로 */
.dialog.toBottom.active {
	display:block;
}
.dialog.toBottom .layout {
	opacity:0;
	z-index:250;
	pointer-events:none;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.dialog.toBottom.active .layout {
	opacity:1;
	pointer-events:auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/*.dialog.toBottom .layout .dialogClose {
	display:none;
}
.dialog.toBottom.active .layout .dialogClose {
	display:block;
}*/
.dialog.toBottom .dim {
	opacity:0;
	-webkit-transition:opacity .2s ease .4s; 
	transition: opacity .2s ease .4s; 
}
.dialog.toBottom.active .dim {
	opacity:.7;
	-webkit-transition: opacity .2s ease 0s;
	transition: opacity .2s ease 0s;
	-webkit-pointer-events:auto;
	pointer-events:auto;
}

.dialog.page .layout {position:relative;}

/* 일회용 Dialog : 나타났다 사라짐. 이건 딤없어야함*/
.toast .layout{
	opacity:0;
}
.toast.active .layout { 
	opacity:1;
	animation: animationFrames ease 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: animationFrames ease 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
@keyframes animationFrames{
  0% {
    opacity:1;
    transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    transform:  translate3d(0,-10px,0)  ;
  }

  60% {
	opacity:1;
    transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    transform:  translate3d(0,-100%,0)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:1;
    -webkit-transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    -webkit-transform:  translate3d(0,-10px,0)  ;
  }

  60% {
	opacity:1;
    -webkit-transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    -webkit-transform:  translate3d(0,-100%,0)  ;
  }
}
.toast.showAni .layout { 
	opacity:1;
	animation: showAni ease 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: showAni ease 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
@keyframes showAni{
  0% {
    opacity:1;
    transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    transform:  translate3d(0,-10px,0)  ;
  }
60% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
}

@-webkit-keyframes showAni {
  0% {
    opacity:1;
    transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    transform:  translate3d(0,-10px,0)  ;
  }
60% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
}

.toast.hideAni .layout { 
	opacity:1;
	animation: hideAni ease 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: hideAni ease 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
@keyframes hideAni{
	0% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
  30% {
	opacity:1;
    transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    transform:  translate3d(0,-100%,0)  ;
  }
}

@-webkit-keyframes hideAni {
  0% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
  30% {
	opacity:1;
    transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    transform:  translate3d(0,-100%,0)  ;
  }
}
.toast.active .layout {
}
.toast .layout .body {
	display:inline-block;
    width: 100%;
}

/* Dialog Center */
.dialog.toCenter {}
.dialog.toCenter .dim {position:absolute; opacity:0; display:block;}
.dialog.toCenter.active .dim {opacity:.7;}
.dialog.toCenter .layout {
	visibility:hidden;
	-webkit-transform:translate3d(0,1000px,0);
	transform:translate3d(0,1000px,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s;
	transition:transform .5s ease, visibility 0s linear .5s;
}
.dialog.toCenter.active .layout {
	visibility:visible;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-transition:-webkit-transform .4s ease, visibility 0s linear 0s;
	transition:-webkit-transform .4s ease, visibility 0s linear 0s;
}

/* 즐겨찾기 아이콘 */
/*
.bookmark.transition,
.bookmark.transition i,
.bookmark.transition i:after {display:inline-block; width:18px; height:18px; vertical-align:top; font:0/0 a; background-repeat:no-repeat; background-position:0 0; background-size:18px auto; pointer-events:none;}
.bookmark.transition {background-image:url('/static/images/common/star_blank_36x36.png'); }
.bookmark.transition i {position:relative; background-image:url('/static/images/common/star_active_36x36.png');}
.bookmark.transition.active i {opacity:1;}

.bookmark.transition i {
	opacity:0;
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.bookmark.transition.active i {
	opacity:1;
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.bookmark.transition i:after {
	opacity:0;
	position:absolute; left:0; top:0; right:0; bottom:0;
	background-image:url('/static/images/common/star_active_36x36.png');
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
	-webkit-animation: bookmark 1s 1 ease;
	animation: bookmark 1s 1 ease;
}
.bookmark.transition.active i:after {
	content:'';
	opacity:1;
	position:absolute; left:0; top:0;
	-webkit-animation: bookmark 1s 1 ease;
	animation: bookmark 1s 1 ease;
}

@-webkit-keyframes bookmark {
	0% { -webkit-transform:scale(0); transform:scale(0); opacity:0;}
	50% { -webkit-transform:scale(1.4); transform:scale(1.4); opacity:1;}
	100% { -webkit-transform:scale(0); transform:scale(0); opacity:0;}
}*/