테스트

/* ================================================================================================ KEYFRAMES ================================================================================================ */ @keyframes shake { 2% { transform: translate(-0.5px, -0.5px) rotate(0.5deg); } 4% { transform: translate(2.5px, -1.5px) rotate(-0.5deg); } 6% { transform: translate(2.5px, 0.5px) rotate(1.5deg); } 8% { transform: translate(-0.5px, 2.5px) rotate(-0.5deg); } 10% { transform: translate(1.5px, -0.5px) rotate(1.5deg); } 12% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); } 14% { transform: translate(0.5px, -1.5px) rotate(0.5deg); } 16% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 18% { transform: translate(-1.5px, 1.5px) rotate(0.5deg); } 20% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); } 22% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 24% { transform: translate(-1.5px, 2.5px) rotate(1.5deg); } 26% { transform: translate(-0.5px, 0.5px) rotate(0.5deg); } 28% { transform: translate(-1.5px, 1.5px) rotate(-0.5deg); } 30% { transform: translate(1.5px, 0.5px) rotate(0.5deg); } 32% { transform: translate(1.5px, -0.5px) rotate(0.5deg); } 34% { transform: translate(2.5px, 1.5px) rotate(-0.5deg); } 36% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 38% { transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 40% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 42% { transform: translate(0.5px, 0.5px) rotate(0.5deg); } 44% { transform: translate(1.5px, 1.5px) rotate(-0.5deg); } 46% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 48% { transform: translate(1.5px, 1.5px) rotate(1.5deg); } 50% { transform: translate(0.5px, -0.5px) rotate(0.5deg); } 52% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 54% { transform: translate(1.5px, -1.5px) rotate(0.5deg); } 56% { transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 58% { transform: translate(2.5px, 1.5px) rotate(0.5deg); } 60% { transform: translate(-0.5px, -0.5px) rotate(1.5deg); } 62% { transform: translate(1.5px, 2.5px) rotate(-0.5deg); } 64% { transform: translate(-1.5px, 0.5px) rotate(-0.5deg); } 66% { transform: translate(2.5px, 1.5px) rotate(-0.5deg); } 68% { transform: translate(2.5px, 0.5px) rotate(1.5deg); } 70% { transform: translate(-1.5px, -1.5px) rotate(0.5deg); } 72% { transform: translate(-1.5px, -0.5px) rotate(-0.5deg); } 74% { transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 76% { transform: translate(1.5px, 1.5px) rotate(0.5deg); } 78% { transform: translate(1.5px, -0.5px) rotate(1.5deg); } 80% { transform: translate(-0.5px, 1.5px) rotate(1.5deg); } 82% { transform: translate(2.5px, 2.5px) rotate(0.5deg); } 84% { transform: translate(-0.5px, 0.5px) rotate(1.5deg); } 86% { transform: translate(1.5px, -0.5px) rotate(1.5deg); } 88% { transform: translate(2.5px, -1.5px) rotate(0.5deg); } 90% { transform: translate(0.5px, -1.5px) rotate(-0.5deg); } 92% { transform: translate(-0.5px, -1.5px) rotate(1.5deg); } 94% { transform: translate(2.5px, 0.5px) rotate(1.5deg); } 96% { transform: translate(-0.5px, -1.5px) rotate(-0.5deg); } 98% { transform: translate(-0.5px, -1.5px) rotate(0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } }

@keyframes shake-little { 2% { transform: translate(0px, 0px) rotate(0.5deg); } 4% { transform: translate(2px, 2px) rotate(0.5deg); } 6% { transform: translate(2px, 2px) rotate(0.5deg); } 8% { transform: translate(2px, 2px) rotate(0.5deg); } 10% { transform: translate(2px, 0px) rotate(0.5deg); } 12% { transform: translate(0px, 2px) rotate(0.5deg); } 14% { transform: translate(0px, 0px) rotate(0.5deg); } 16% { transform: translate(2px, 2px) rotate(0.5deg); } 18% { transform: translate(0px, 0px) rotate(0.5deg); } 20% { transform: translate(2px, 0px) rotate(0.5deg); } 22% { transform: translate(2px, 2px) rotate(0.5deg); } 24% { transform: translate(0px, 2px) rotate(0.5deg); } 26% { transform: translate(0px, 0px) rotate(0.5deg); } 28% { transform: translate(0px, 0px) rotate(0.5deg); } 30% { transform: translate(2px, 2px) rotate(0.5deg); } 32% { transform: translate(2px, 0px) rotate(0.5deg); } 34% { transform: translate(2px, 0px) rotate(0.5deg); } 36% { transform: translate(0px, 0px) rotate(0.5deg); } 38% { transform: translate(2px, 2px) rotate(0.5deg); } 40% { transform: translate(2px, 2px) rotate(0.5deg); } 42% { transform: translate(2px, 2px) rotate(0.5deg); } 44% { transform: translate(2px, 0px) rotate(0.5deg); } 46% { transform: translate(0px, 0px) rotate(0.5deg); } 48% { transform: translate(2px, 2px) rotate(0.5deg); } 50% { transform: translate(2px, 0px) rotate(0.5deg); } 52% { transform: translate(0px, 0px) rotate(0.5deg); } 54% { transform: translate(0px, 0px) rotate(0.5deg); } 56% { transform: translate(2px, 0px) rotate(0.5deg); } 58% { transform: translate(2px, 2px) rotate(0.5deg); } 60% { transform: translate(2px, 2px) rotate(0.5deg); } 62% { transform: translate(2px, 2px) rotate(0.5deg); } 64% { transform: translate(2px, 2px) rotate(0.5deg); } 66% { transform: translate(0px, 0px) rotate(0.5deg); } 68% { transform: translate(2px, 2px) rotate(0.5deg); } 70% { transform: translate(2px, 0px) rotate(0.5deg); } 72% { transform: translate(2px, 0px) rotate(0.5deg); } 74% { transform: translate(2px, 2px) rotate(0.5deg); } 76% { transform: translate(0px, 2px) rotate(0.5deg); } 78% { transform: translate(0px, 0px) rotate(0.5deg); } 80% { transform: translate(0px, 0px) rotate(0.5deg); } 82% { transform: translate(0px, 0px) rotate(0.5deg); } 84% { transform: translate(0px, 0px) rotate(0.5deg); } 86% { transform: translate(2px, 0px) rotate(0.5deg); } 88% { transform: translate(2px, 2px) rotate(0.5deg); } 90% { transform: translate(2px, 2px) rotate(0.5deg); } 92% { transform: translate(2px, 0px) rotate(0.5deg); } 94% { transform: translate(2px, 0px) rotate(0.5deg); } 96% { transform: translate(2px, 2px) rotate(0.5deg); } 98% { transform: translate(2px, 2px) rotate(0.5deg); } 0%, 100% { transform: translate(0, 0) rotate(0); } } /*=========================== shake end ==============================*/

@keyframes spin { 0% { transform: rotate(0deg); } 0.1% { transform: rotate(-60deg); } 0.2% { transform: rotate(-144deg); } 0.25% { transform: rotate(-252deg); } 0.3% { transform: rotate(-396deg); } 0.35% { transform: rotate(-576deg); } 0.4% { transform: rotate(-792deg); } 0.45% { transform: rotate(-1152deg); } 0.5% { transform: rotate(-1632deg); } 0.6% { transform: rotate(-2352deg); } 0.7% { transform: rotate(-4012deg); } 2.1% { transform: rotate(-56856deg); } 2.2% { transform: rotate(-58514deg); } 2.3% { transform: rotate(-59234deg); } 2.4% { transform: rotate(-59703deg); } 2.5% { transform: rotate(-60063deg); } 2.6% { transform: rotate(-60279deg); } 2.7% { transform: rotate(-60603deg); } 2.8% { transform: rotate(-60711deg); } 100% { transform: rotate(-82656deg); } } @keyframes scale-up { 0% { transform: scale(0.5); } 0.5% { transform: scale(0.5); } 1% { transform: scale(2.5); } 2% { transform: scale(2.5); } 2.3% { transform: scale(0.5) translate(200px,-200px); } 100% { } } @keyframes remove-border { 0% { } 1% { border-color: rgba(255,255,255,0); background-color: rgba(255,255,255,0); } 100% { } } @keyframes fall-header { 0% { top: 0; } 0.6% { opacity: 1; } 0.7% { top: 350px; transform: scale(0) perspective(450px) rotateY(155deg) rotateZ(100deg); opacity: 0; } 100% { opacity: 0; } } @keyframes fall-sharemenu { 0% {} 0.5% { transform: translate(-100%,0%) rotate(-270deg) scale(0.2); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-search_box { 0% {} 0.4% { transform: translate(-10%,-500%) rotate(400deg) scale(0); opacity: 1; } 0.45% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-list_btn_top_right { 0% {} 0.5% { transform: translate(45vw,212px) rotate(180deg) scale(0.2); transform-origin: left; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-list_btn_top_left { 0% {} 0.5% { transform: translate(-45vw,212px) rotate(180deg) scale(0.2); transform-origin: left; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-list_btn_bottom_right { 0% {} 0.5% { transform: translate(45vw,-212px) rotate(180deg) scale(0.2); transform-origin: left; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-list_btn_bottom_left { 0% {} 0.5% { transform: translate(-45vw,-312px) rotate(180deg) scale(0.2); transform-origin: left; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-cafemenu { 0% {} 0.7% { transform: translate(44vw,-42%) rotate(345deg) scale(0.05); opacity: 1; } 0.75% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-commentDiv { 0% {} 1% { transform: translate(-6vw,-8vw) rotateX(230deg) rotateY(240deg) scale(0.05); opacity: 1; transform-origin: top; } 1.1% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-subject { 0% {} 0.5% { transform: translate(45vw,190px) rotate(50deg) scale(0.4); transform-origin: right; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-writer { 0% {} 0.5% { transform: translate(40vw,180px) rotate(-60deg) scale(0.4); transform-origin: right; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-url { 0% {} 0.5% { transform: translate(45vw,180px) rotate(-45deg) scale(0.2); transform-origin: right; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-comment_cnt { 0% {} 0.5% { transform: translate(40vw,-82px) rotate(180deg) scale(0.2); transform-origin: left; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-ccl { 0% {} 0.5% { transform: translate(-44vw,-42px) scale(0.5); transform-origin: left; opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes appear-hos { 0% { } 0.04% { opacity: 1; } 100% { opacity: 1; } } @keyframes fall-paging { 0% { } 0.5% { transform: rotate(-45deg) translate(7vw,-400px) scale(0.5); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-minidaum { 0% { } 0.5% { transform: rotate(-48deg) translate(-45vw) scale(0.5); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } @keyframes fall-nickzzal { 0% { } 0.5% { transform: translate(387px,22px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.1); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } }

/* ================================================================================================ STYLE ================================================================================================ */ html { animation-name: shake; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: 190; animation-delay: 6.5s; } body { animation-name: shake-little; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: 245; animation-delay: 3s; } .bbs_contents {z-index: 0;} #header { z-index: 2000; } #title { overflow: visible; animation: 1000s fall-header ease-out 8.5s; } #shareMenu { z-index: 2000 } #shareMenu > * { animation: 1000s fall-sharemenu cubic-bezier(0.85, 0.18, 1, 1.01) 7s; z-index: 2000; } #wrap { overflow: visible; } .search_box_elem { animation: 1000s fall-search_box ease 6s; } .list_btn_top > a { animation: 1000s fall-list_btn_top_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s; z-index: 2000; } .list_btn_top > .list_paging { animation: 1000s fall-list_btn_top_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s; z-index: 2000; } .lineT > a { animation: 1000s fall-list_btn_bottom_right cubic-bezier(0.85, 0.18, 1, 1.01) 7s; z-index: 2000; } .lineT > .list_paging { animation: 1000s fall-list_btn_bottom_left cubic-bezier(0.85, 0.18, 1, 1.01) 7s; z-index: 2000; } #cafemenu { animation: 1000s fall-cafemenu linear 7s; z-index: 2000; } .commentDiv { animation: 1000s fall-commentDiv linear 8s; z-index: 2001; } .subject > span, .subject > a { animation: 1000s fall-subject linear 7s; z-index: 2000; } .article_writer > a, .article_writer > .bar2, .article_writer > .p11 { animation: 1000s fall-writer linear 6s; z-index: 2000; } .article_writer > .txt_sub { animation: 1000s fall-url linear 6s; z-index: 2000; } #comment_cnt { animation: 1000s fall-comment_cnt linear 6s; z-index: 2000; } .cclArea img { animation: 1000s fall-ccl linear 6s; z-index: 2000; } .article_subject, .linebg, .lineT { animation: 1000s remove-border linear 7s; } .prenext_paging { animation: 1000s fall-paging linear 6s; z-index: 2000; } #daum-ad-root-ifrm, .goTop, #footer { display: none; } #minidaum { animation: 1000s fall-minidaum linear 6s; z-index: 2000; } .sigong div { width: 300px; height:300px; min-width: 300px; top: 0; left: 0; background-size: contain; background-position: center; background-repeat: no-repeat; } .sigong .sigong_detail1 { position: absolute; background-image: url('http://cfile263.uf.daum.net/image/2120C1435920967129707D'); } .sigong .sigong_detail2 { background-image: url('http://cfile290.uf.daum.net/image/2720604359209677295E2D'); animation: spin 1000s linear infinite; } .nickzzal img { position: absolute; top: -50px; width: 110px; z-index: 2000; animation: 1000s fall-nickzzal linear 6s; } #user_contents { overflow: visible !important; } .hos { background-image: url(http://cfile278.uf.daum.net/image/2124B4435920967229A02D); background-size: contain; background-position: center; }

audio { visibility: hidden; }

/* ================================================================================================ 미디어쿼리 ================================================================================================ */ @media screen and (min-width: 480px) { /* vw>480px */ .sigong { position: absolute; right: 50%; margin-top: -100px; animation: scale-up 1000s linear infinite; z-index: 1000; } .hos { opacity: 0; animation: 1000s appear-hos linear 23s; width: 708px; height: 700px; position: absolute; right: 50%; margin-top: -338px; margin-right: -255px; } }

@media screen and (max-width: 480px) { /* vw<480px */ @keyframes scale-up { 0% { transform: scale(0.5); } 0.5% { transform: scale(0.5); } 1% { transform: scale(1.2); } 2% { transform: scale(1.2); } 2.5% { transform: scale(0.21) translate(33%,-47%) } 100% { } } @keyframes mobile_comment1 { 0% {} 0.5% { transform: translate(0,-100px) scale(0.4) rotate(-225deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment2 { 0% {} 0.5% { transform: translate(0,-200px) scale(0.4) rotate(-45deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment3 { 0% {} 0.5% { transform: translate(0,-300%) scale(0.4) rotate(70deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment4 { 0% {} 0.5% { transform: translate(0,-400%) scale(0.4) rotate(-80deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_comment5 { 0% {} 0.5% { transform: translate(0,-500%) scale(0.4) rotate(200deg); opacity: 1; } 0.55% { opacity: 0; } 100% {} } @keyframes mobile_subject { 0% {} 1% { transform: translate(0,250px) scale(0.2) rotateX(60deg) rotateY(60deg) rotateZ(360deg); opacity: 1; } 1.05% { opacity: 0; } 100% {} } @keyframes mobile_navi { 0% {} 0.6% { transform: translate(0,350px) scale(0.5) rotate(-145deg); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_tabcafe { 0% {} 0.6% { transform: translate(0,-100px) scale(0.2) rotate(-145deg); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_optionbtn1 { 0% {} 0.6% { transform: translate(-65px,-10px) scale(0.5); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes mobile_optionbtn2 { 0% {} 0.6% { transform: translate(-100px,-10px) scale(0.5); opacity: 1; } 0.65% { opacity: 0; } 100% {} } @keyframes fall-nickzzal { 0% { } 0.5% { transform: translate(120px,150px) rotate(200deg) rotateX(60deg) rotateY(60deg) scale(0.2); opacity: 1; } 0.55% { opacity: 0; } 100% { opacity: 0; } } html, body { overflow: hidden; } .sigong div { width: 100%; } .sigong { animation: scale-up 1000s linear infinite; width: 100%; z-index: 1000; display: table-cell; } .hos { position: absolute; width: 100%; left: 0; opacity: 0; z-index: -1; animation: 1000s appear-hos linear 23s; } .mobilebox { position: absolute; display: table; top: 0; left: 0; width: 100%; height: 375px; vertical-align: middle; } .list_cmt > li:nth-child(1) { position: relative; animation: 1000s mobile_comment1 linear 6s; z-index: 2000; } .list_cmt > li:nth-child(2) { position: relative; animation: 1000s mobile_comment2 linear 6.4s; z-index: 2000; } .list_cmt > li:nth-child(3) { position: relative; animation: 1000s mobile_comment3 linear 6.8s; z-index: 2000; } .list_cmt > li:nth-child(4) { position: relative; animation: 1000s mobile_comment4 linear 7.2s; z-index: 2000; } .list_cmt > li:nth-child(5) { position: relative; animation: 1000s mobile_comment5 linear 7.6s; z-index: 2000; } .view_subject { animation: 1000s mobile_subject linear 10s; z-index: 2000; } .cafe_navi { animation: 1000s mobile_navi linear 7s; z-index: 2000; } .tab_cafe { animation: 1000s mobile_tabcafe linear 9s; z-index: 2000; position: relative; } .detail_btns { animation: 1000s mobile_optionbtn1 linear 6s; z-index: 2000; position: relative; } .article_more { animation: 1000s mobile_optionbtn2 linear 6.5s; z-index: 2000; position: relative; } }

테스트

[잡담]테스트